标签：scale matrix 更改 skew transform 2D rotate CSS 3D
1、元素位移translate(左边,顶边)
div{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
-o-transform: translate(50px,100px); /* Opera */
-moz-transform: translate(50px,100px); /* Firefox */
}
2 、元素旋转rotate(角度)
div{
transform: rotate(10deg);
-ms-transform: rotate(10deg); /* IE 9 */
-webkit-transform: rotate(10deg); /* Safari and Chrome */
-o-transform: rotate(10deg); /* Opera */
-moz-transform: rotate(10deg); /* Firefox */
}
rotate()
scale()
skew()
matrix()
3、元素缩放scale(宽度倍数，高度倍数)
div{
transform: scale(1,2);
-ms-transform: scale(1,2); /* IE 9 */
-webkit-transform: scale(1,2); /* Safari 和 Chrome */
-o-transform: scale(1,2); /* Opera */
-moz-transform: scale(1,2); /* Firefox */
}
4、元素翻转给定的角度 skew(x,y)
div{
transform: skew(13deg,21deg);
-ms-transform: skew(13deg,21deg); /* IE 9 */
-webkit-transform: skew(13deg,21deg); /* Safari and Chrome */
-o-transform: skew(13deg,21deg); /* Opera */
-moz-transform: skew(13deg,21deg); /* Firefox */
}
http://www.ssnd.com.cn 化妆品OEM代加工
5、将前面所有方法进行组合matrix()
div{
transform:matrix(1.3，0.32,1.32,0.22，0.54,0.65);
-ms-transform:matrix(1.3，0.32,1.32,0.22，0.54,0.65); /* IE 9 */
-moz-transform:matrix(1.3，0.32,1.32,0.22，0.54,0.65); /* Firefox */
-webkit-transform:matrix(1.3，0.32,1.32,0.22，0.54,0.65); /* Safari and Chrome */
-o-transform:matrix(1.3，0.32,1.32,0.22，0.54,0.65); /* Opera */
}
定义6个数的矩阵
6、2D过度到3D
div{
transform:rotate(1deg);
-ms-transform:rotate(1deg); /* IE 9 */
-moz-transform:rotate(1deg); /* Firefox */
-webkit-transform:rotate(1deg); /* Safari 和 Chrome */
-o-transform:rotate(1deg); /* Opera */
}
//它包含了所有的2D方法和3D方法，并且可以单个设置每一种的方法的x,y轴转向值，比如：
rotate(angle) 定义 2D 旋转，在参数中规定角度。测试
rotate3d(x,y,z,angle) 定义 3D 旋转
rotateX(angle) 定义沿着 X 轴的 3D 旋转
rotateY(angle) 定义沿着 Y 轴的 3D 旋转
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转
//其它的都是差不多的用法，不过还有一个用法不同的就是：
perspective(n) 为3D转换元素定义透视视图。标签：scale,matrix,更改,skew,transform,2D,rotate,CSS,3D 来源： https://www.cnblogs.com/qianxiaox/p/15003772.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。