关于web前端HTML+CSS的学习，本篇主要介绍了CSS样式更改中的2D转换的基础用法，希望对Web前端HTML+CSS的学习有所帮助。

2D转换

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 */

}

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转换元素定义透视视图。

关注“职坐标在线”（Zhizuobiao_Online）公众号，免费获取最新技术干货教程资源哦