transform

transform 属性允许您通过倾斜、旋转、平移或缩放来视觉上操作元素

.element {
  width: 20px;
  height: 20px;
  transform: scale(20);
}
 

即使声明了高度和宽度，此元素现在也将被缩放为其原始大小的二十倍

为该函数提供两个值将使它在水平方向上按第一个值拉伸，在垂直方向上按第二个值拉伸。 在以下示例中，该元素现在将是原始元素宽度的两倍，但高度是原始元素的一半

.element {
  transform: scale(2, .5);
}

或者，您可以更具体地进行操作，而无需使用速记函数

transform: scaleX(2);
transform: scaleY(.5);

但是 scale() 只是许多可用的转换函数之一。

值

• scale(): 影响元素的大小。 这也适用于元素的 font-size、padding、height 和 width。 它也是 scaleX 和 scaleY 函数的速记函数。
• skewX() 和 skewY(): 将元素向左或向右倾斜，就像将矩形变成平行四边形一样。 skew() 是一个速记，它通过接受两个值来组合 skewX() 和 skewY。
• translate(): 将元素向侧面或上下移动。
• rotate(): 从其当前位置顺时针旋转元素。
• matrix(): 一个可能不是用手写的函数，但将所有转换组合成一个。
• perspective(): 不影响元素本身，但影响后代元素的 3D 转换，使它们都具有一致的深度透视。

• 倾斜
• 旋转
• 平移
• 多个值
• 矩阵
• 3D 转换

倾斜

/* Skew points along the x-axis */
.element {
  transform: skewX(25deg);
}

/* Skew point along the y-axis */
.element {
  transform: skewY(25deg);
}

/* Skew points along the x- and y-axis */
.element {
  transform: skew(25deg, 25deg);
}

skewX 和 skewY 转换函数将元素向一个方向或另一个方向倾斜。 请记住：没有用于倾斜元素的速记属性，因此您需要使用这两个函数。 在下面的示例中，我们可以使用 skewX 将一个 100px x 100px 的正方形向左和向右倾斜

而在本示例中，我们可以使用 skewY 在垂直方向上倾斜元素

现在让我们使用 skew() 来组合这两个函数

旋转

.element {
  transform: rotate(25deg);
}

这将从其原始位置顺时针旋转元素，而负值则会将其朝相反方向旋转。 这是一个简单的动画示例，其中一个正方形每三秒钟持续旋转 360 度

我们还可以使用 rotateX、rotateY 和 rotateZ 函数，如下所示

平移

.element {
  transform: translate(20px, 10px);
}

此转换函数将元素向侧面或上下移动。 为什么不直接使用 top/left/bottom/right？ 嗯，有时会有点混乱。 我会认为它们是布局/定位（它们有更好的浏览器支持），而这个方法是将这些东西作为过渡或动画的一部分移动。

这些值可以是任何长度值，例如 10px 或 2.4em。 一个值将元素向右移动（负值向左移动）。 如果提供第二个值，则第二个值将将其向下移动（负值向上移动）。 或者，您可以更具体地进行操作

transform: translateX(value);
transform: translateY(value);

需要注意的是，使用 transform 的元素不会导致其他元素围绕它流动。 通过使用下面的 translate 函数并将绿色正方形从其原始位置 nudged 出来，我们将注意到周围的文本将保持固定，就好像正方形是一个块元素一样

还需要注意的是，如果您想对该属性进行动画处理，translate 将被硬件加速，而 position: absolute 则不会。

多个值

使用空格分隔的列表，您可以向 transform 属性添加多个值

.element {
  width: 20px;
  height: 20px;
  transform: scale(20) skew(-20deg);
}

需要注意的是，这些转换将按照一定的顺序执行，在上面的示例中，将先执行 skew，然后缩放元素。

矩阵

matrix 变换函数可以用来将所有变换组合成一个。它有点像变换简写，只是我不认为它真的打算手动编写。市面上有一些工具，比如 The Matrix Resolutions，可以将一组变换转换为单个矩阵声明。也许在某些情况下，这可以减少文件大小，尽管作者不友好的微优化可能不值得你花时间。

出于好奇，这个

rotate(45deg) translate(24px, 25px)

…也可以表示为

matrix(0.7071067811865475, 0.7071067811865476, -0.7071067811865476, 0.7071067811865475, -0.7071067811865497, 34.648232278140824)

3D 变换

上面大多数属性都有它们的 3D 版本。

translate3d(x, y, z)
translateZ(z)

translate3d 中的第三个值或 translateZ 中的值将元素移向观察者，负值则移开。

scale3d(sx, sy, sz)
scaleZ(sz)

scale3d 中的第三个值或 scaleZ 中的值会影响沿 z 轴的缩放（例如，从屏幕上直接出来的虚线）。

rotateX(value)
rotateY(value)
rotate3d(x, y, z)

rotateX 和 rotateY 会在 3D 空间中围绕这些轴旋转元素。rotate3d 允许你指定 3D 空间中的一点，围绕该点旋转元素。

matrix3d(…)

一种以编程方式在 4×4 网格中描述 3D 变换的方法。没有人会手动编写这些，永远不会。

perspective(value)

此值不会影响元素本身，但会影响后代元素的 3D 变换，使它们都具有一致的深度透视。

更多信息

• MDN 文档关于 transform 和 用法.
• David DeSandro 关于 3D 变换 的文档
• Surfin' Safari: 3D 变换
• W3C 关于 CSS3 变换的规范
• CSS 3D 变换简介
• 使用 CSS translateZ() 和 perspective() 的技巧（DigitalOcean）

相关属性

随机事实： transform 创建了一个定位上下文，就像 position: relative;
一样。

浏览器支持

支持 2D 变换

支持 3D 变换