CSS 中的transform 属性用于改变视觉格式化模型的坐标空间。这用于在元素上添加倾斜、旋转、平移等效果。
注意：转换可以是 2-D 或 3-D 类型。
句法：
transform: none|transform-functions|initial|inherit;价值观：
| Value | Description |
|---|---|
| none | No transformation takes place. |
| matrix(x, x, x, x, x, x) | Specifies a matrix transformation of 2-D type. It takes 6 values. |
| matrix3d(x, x, x, x, x, x, x, x, x) | Specifies a matrix transformation of 3-D type. It takes 9 values. |
| translate(x, y) | Specifies a translation across the X and Y axes. |
| translate3d(x, y, z) | Specifies a translation across the X, Y and the Z axes. |
| translateX(x) | Specifies the translation across the X-axis only. |
| translateY(y) | Specifies the translation across the Y-axis only. |
| translateZ(z) | Specifies the translation across the Z-axis only. |
| rotate(angle) | Specifies the angle of rotation. |
| rotateX(angle) | Specifies the rotation along the X-axis corresponding to the angle of rotation. |
| roatateY(angle) | Specifies the rotation along the Y-axis corresponding to the angle of rotation. |
| roteteZ(angle) | Specifies the rotation along the Z-axis corresponding to the angle of rotation. |
| scale(x, y) | Specifies the scale transformation along the X and Y axes. |
| scale3d(x, y, z) | Specifies the scale transformation along the X, Y and Z axes. |
| scaleX(x) | Specifies the scale transformation along the X-axis. |
| scaleY(y) | Specifies the scale transformation along the Y-axis. |
| scaleZ(z) | Specifies the scale transformation along the Z-axis. |
| scale3d(x, y, z) | Specifies the scale transformation along the X, Y and Z axes. |
| skew(angle, angle) | Specifies the skew transformation along the X and Y axes corresponding the skew angles. |
| skewX(angle) | Specifies the skew transformation along the X-axis corresponding to the skew angle. |
| skewY(angle) | Specifies the skew transformation along the Y-axis corresponding to the skew angle. |
| skewZ(angle) | Specifies the skew transformation along the Z-axis corresponding to the skew angle. |
| perspective(x) | Specifies the perspective of an element. refer: Perspective property |
| initial | Initializes the element to its default value. |
| inherit | Inherits the value from its parent element. |
示例 1：没有转换属性。
CSS Transform Property
GeeksForGeeks
输出： 
示例 2：此示例描述了 Matrix() 属性值。
CSS Transform Property
GeeksForGeeks
输出： 
示例 3：此示例描述了 Matrix3d() 属性值。
CSS Transform Property
GeeksForGeeks
输出： 
示例 4：此示例描述了 translate() 属性值。
CSS Transform Property
GeeksForGeeks
输出： 
示例 5：此示例描述了 translate3d() 属性值。
CSS Transform Property
GeeksForGeeks
输出： 
示例 6：此示例描述了 translateX() 属性值。
CSS Transform Property
GeeksForGeeks
输出： 
示例 7：此示例描述了 translateY() 属性值。
CSS Transform Property
GeeksForGeeks
输出： 
示例 8：此示例描述了 translateZ() 属性值。
CSS Transform Property
GeeksForGeeks
输出： 
示例 9：此示例描述了 rotate() 属性值。
CSS Transform Property
GeeksForGeeks
输出： 
示例 10：此示例描述了 rotateX() 属性值。
CSS Transform Property
GeeksForGeeks
输出： 
示例 11：此示例描述了 rotateY() 属性值。
CSS Transform Property
GeeksForGeeks
输出： 
示例 12：此示例描述了 rotateZ() 属性值。
CSS Transform Property
GeeksForGeeks
输出： 
示例 13：此示例描述了 scale() 属性值。
CSS Transform Property
GeeksForGeeks
输出： 
示例 14：此示例描述了 scale3d() 属性值。
CSS Transform Property
GeeksForGeeks
输出： 
示例 15：此示例描述了 scaleX() 属性值。
CSS Transform Property
GeeksForGeeks
输出： 
示例 16：此示例描述了 scaleY() 属性值。
CSS Transform Property
GeeksForGeeks
输出： 
示例 17：此示例描述了 scaleZ() 属性值。
CSS Transform Property
GeeksForGeeks
输出： 
示例 18：此示例描述了 skew() 属性值。
CSS Transform Property
GeeksForGeeks
输出： 
示例 19：此示例描述 skewX() 属性值。
CSS Transform Property
GeeksForGeeks
输出： 
示例 20：此示例描述 skewY() 属性值。
CSS Transform Property
GeeksForGeeks
输出： 
示例 21：此示例描述了perspective() 属性值。
CSS Transform Property
GeeksForGeeks
输出： 
示例 22：此示例描述初始属性值。
CSS Transform Property
GeeksForGeeks
输出： 
示例 23：此示例描述了继承属性值。
CSS Transform Property
GeeksForGeeks
输出： 
注意：有时 3-D 值在用于 2-D 元素时不会给出正确的输出，因此不建议对 2-D 元素使用 3-D 值。
支持的浏览器： transform 属性支持的浏览器如下：
- 二维变换：
- Chrome 36.0, 4.0 -webkit-
- 边缘 10.0, 9.0 -ms-
- 火狐 16.0, 3.5 -moz-
- Safari 9.0, 3.2 -webkit-
- 歌剧 23.0, 15.0 -webkit-, 10.5 -o-
- 3-D 变换：
- Chrome 36.0, 12.0 -webkit-
- 边缘 12.0
- 火狐 10.0
- Safari 9.0, 4.0 -webkit-
- 歌剧 23.0, 15.0 -webkit-