## **语法** transform: none|*transform-functions*; ``` div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -webkit-transform:rotate(7deg); /* Safari and Chrome */ } ``` | transform的transform-functions值 | 描述 | | --- | --- | | none | 定义不进行转换。 | | matrix(n,n,n,n,n,n) | 定义 2D 转换，使用六个值的矩阵。 | | matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换，使用 16 个值的 4x4 矩阵。 | | translate(x,y) | 定义 2D 转换。 | | translate3d(x,y,z) | 定义 3D 转换。 | | translateX(x) | 定义转换，只是用 X 轴的值。 | | translateY(y) | 定义转换，只是用 Y 轴的值。 | | translateZ(z) | 定义 3D 转换，只是用 Z 轴的值。 | | scale(x\[,y\]?) | 定义 2D 缩放转换。 | | scale3d(x,y,z) | 定义 3D 缩放转换。 | | scaleX(x) | 通过设置 X 轴的值来定义缩放转换。 | | scaleY(y) | 通过设置 Y 轴的值来定义缩放转换。 | | scaleZ(z) | 通过设置 Z 轴的值来定义 3D 缩放转换。 | | rotate(angle) | 定义 2D 旋转，在参数中规定角度。 | | rotate3d(x,y,z,angle) | 定义 3D 旋转。 | | rotateX(angle) | 定义沿着 X 轴的 3D 旋转。 | | rotateY(angle) | 定义沿着 Y 轴的 3D 旋转。 | | rotateZ(angle) | 定义沿着 Z 轴的 3D 旋转。 | | skew(x-angle,y-angle) | 定义沿着 X 和 Y 轴的 2D 倾斜转换。 | | skewX(angle) | 定义沿着 X 轴的 2D 倾斜转换。 | | skewY(angle) | 定义沿着 Y 轴的 2D 倾斜转换。 | | perspective(n) | 为 3D 转换元素定义透视视图。 | **效果：**[https://www.cnblogs.com/lichihua/p/10807088.html](https://www.cnblogs.com/lichihua/p/10807088.html) 前置属性： **transform-origin**更改一个元素变形的原点 **transform-style** 设置元素的子元素是位于 3D 空间中还是平面中 * flat：平面，如果选择平面即此值，元素的子元素将不会有 3D 的遮挡关系 * preserve-3d： **perspective**：指定了观察者与 z=0 平面的距离即开启网页的透视功能 **perspective-origin**：指定了观察者的位置，用作 perspective 属性的消失点。 **backface-visibility**：指定当元素背面朝向观察者时是否可见 2D变形： translate scale rotate skew matrix 3D变形： translate3d scale3d rotate3d matrix3d 平移： ``` <div style="width: 200px;height:200px;border:1px solid red;"> <div style="width: 100px;height: 100px;background-color:#bfa; transform: translate(20px,40px)"></div> </div> ``` <div style="width: 200px;height:200px;border:1px solid red;"> <div style="width: 100px;height: 100px;background-color:#bfa; transform: translate(20px,40px)"></div> </div> 旋转 ``` <div style="width: 200px;height:200px;border:1px solid red;"> <div style="width:100px;height:100px;background-color:#bfa;transform:rotate(7deg);"></div> </div> ``` <div style="width: 200px;height:200px;border:1px solid red;"> <div style="width:100px;height:100px;background-color:#bfa;transform:rotate(7deg);"></div> </div> <div style="width: 200px;height:200px;border:1px solid red;"> <div style="width:100px;height:100px;background-color:#bfa;transform: matrix(1, 2, 3, 4, 5, 6);"></div> </div>