CSS 属性：transform
通过旋转、倾斜、缩放和移动来操纵元素框及其内容的大小、形状和位置。
可能的值
2D 变换函数
| 值 | 描述 | 示例 |
|---|---|---|
rotate([angle]) | 围绕 transform-origin 指定的点，根据给定的角度旋转元素框。 | rotate(-45deg) |
skewX([angle]) | 沿给定角度倾斜（水平）x 轴。 | skewX(20deg) |
skewY([angle]) | 沿给定角度倾斜（垂直）y 轴。 | skewY(40deg) |
skew([angle]) | 沿给定角度倾斜（水平）x 轴。等同于 skewX([angle])。 | skew(20deg) |
skew([angle], [angle]) | 沿第一个角度倾斜（水平）x 轴，沿第二个角度倾斜（垂直）y 轴。 | skew(20deg, 40deg) |
scaleX([number]) | 拉伸或收缩水平尺寸，将其乘以指定数字。 | scaleX(2) |
scaleY([number]) | 拉伸或收缩垂直尺寸，将其乘以指定数字。 | scaleY(0.5) |
scale([number]) | 拉伸或收缩水平和垂直尺寸，将其乘以指定数字。 | scale(2) |
scale([number], [number]) | 拉伸或收缩水平尺寸，将其乘以第一个数字，拉伸或收缩垂直尺寸，将其乘以第二个数字。 | scale(2, 0.5) |
translateX([length]) | 水平移动元素框指定的长度。 | translateX(100px) |
translateY([length]) | 垂直移动元素框指定的长度。 | translateY(-2em) |
translate([length]) | 水平移动元素框指定的长度。等同于 translateX([angle])。 | translateX(100px) |
translate([length], [length]) | 水平移动元素框指定的第一个长度，垂直移动第二个长度。 | translate(100px, -2em) |
matrix([values]) | 一个六值变换矩阵。每个 数字值 与缩放（第 1 和第 4 个）、倾斜（第 2 和第 3 个）以及移动（第 5 和第 6 个）相关，而旋转是隐含的，由其他值确定。可以使用 矩阵转换 工具来确定值。 | matrix(2.6, -0.2, 1.9, 0.9, 205, -48.7) |
3D 变换函数
| 值 | 描述 | 示例 |
|---|---|---|
rotate3d([number], [number], [number], [angle]) | 围绕由前三个数字值（x 轴、y 轴和 z 轴）指定的方向向量，根据给定的角度旋转 3D 元素框。 | rotate3d(1, -1, 1, 45deg) |
rotateX([angle]) | 等同于 rotate3d(1,0,0,[angle])。 | rotateX(45deg) |
rotateY([angle]) | 等同于 rotate3d(0,1,0,[angle])。 | rotateY(50grad) |
rotateZ([angle]) | 等同于 rotate3d(0,0,1,[angle]) 和 rotate([angle])。 | rotateZ(1rad) |
scale3d([number], [number], [number]) | 拉伸或收缩尺寸，将 x 轴乘以第一个数字，y 轴乘以第二个数字，z 轴乘以第三个数字。 | scale3d(1, 2, 3) |
scaleZ([number]) | 在 z 轴上拉伸或收缩尺寸，将其乘以指定数字。等同于 scale3d(1, 1, [number])。 | scaleZ(3) |
translate3d([length], [length], [length]) | 在 x 轴上沿第一个长度移动 3D 元素框，沿 y 轴移动第二个长度，沿 z 轴移动第三个长度。 | translate3d(10px, 20px, 30px) |
translateZ([length]) | 在 z 轴上沿指定长度移动 3D 元素框。等同于 translate3d(0, 0, [length])。 | translateZ(30px) |
matrix3d([values]) | 一个十六值变换矩阵，结合了所有 3D 变换值。可以使用 矩阵转换 工具来确定值。 | matrix3d(0.8, 0.3, 0.5, 0, -1, 1.6, 0.6, 0, -0.9, -1.5, 2.4, 0, -40.1, -10.2, 89.9, 1) |
perspective([length]) | z 平面原点到查看者的距离。值越小，3D 效果越明显。 | perspective(500px) |
关键字
多个值
可以通过用空格分隔来组合任意数量的变换值。
示例：rotate(-45deg) skew(20deg, 40deg) scale(2)
每个值将按顺序依次应用，但顺序相反。例如，scale(2,1) rotate(45deg) 会先旋转，然后缩放。因此，它与 rotate(45deg) scale(2,1) 不同。
示例
#puddle {
width: 200px;
height: 200px;
transform: rotate(-10deg);
}
/* A 200px by 200px box, rotated 10 degrees counter-clockwise. */
#pond {
width: 200px;
height: 100px;
transform: translate(20px, -10px) scale(1,2);
}
/* A 200px by 100px box stretched to twice its height (making it 200px and, importantly, doubling the height of the box's contents) then shifted 20px right and 10px up. */