CSS3 2D 转换

CSS 2D Transforms

CSS transforms（变换）允许你通过在 2D 或 3D 空间中对元素进行位移（translating）、旋转（rotating）、缩放（scaling）和倾斜（skewing）来改变其视觉呈现。

这些变换影响的是视觉渲染，但不会改变元素在正常文档流中的位置，这意味着它们不会影响周围元素的布局。

本章重点介绍 2D transforms（二维变换）。

2D transforms 已被现代浏览器广泛支持。对于标准的 transform 函数，通常不再需要供应商前缀，例如 -webkit-、-moz- 等。

属性	Internet Explorer	Chrome	Firefox	Safari	Opera
transform	IE 9+	Chrome	Firefox	Safari	Opera
transform-origin	IE 9+	Chrome	Firefox	Safari	Opera

使用 transform 属性并结合一个或多个 transform 函数来应用变换：

将元素从当前位置移动，但不影响布局流。正值向右/向下移动，负值向左/向上移动。

示例：向右移动 50px，向下移动 100px。

.target-element {
  transform: translate(50px, 100px);
}

围绕其原点（默认是中心）旋转元素。使用度（deg）、弧度（rad）或圈（turn）等单位。

示例：顺时针旋转 30 度。

.target-element {
  transform: rotate(30deg);
}

示例：逆时针旋转 45 度。

.target-element {
  transform: rotate(-45deg);
}

改变元素尺寸。值 1 表示原始尺寸，2 表示双倍尺寸，0.5 表示半倍尺寸。

示例：宽度加倍，保持原始高度。

.target-element {
  transform: scale(2, 1); /* 或 scaleX(2) */
}

示例：将元素均匀缩小到其原始尺寸的 75%。

.target-element {
  transform: scale(0.75);
}

沿水平或垂直轴倾斜元素。

示例：沿 X 轴倾斜 20 度。

.target-element {
  transform: skewX(20deg);
}

示例：沿 Y 轴倾斜 -10 度。

.target-element {
  transform: skewY(-10deg);
}

示例：沿两个轴方向倾斜。

.target-element {
  transform: skew(20deg, -10deg);
}

默认情况下，rotate() 和 scale() 等变换是围绕元素的中心点（50% 50% 或 center center）进行的。transform-origin 属性允许你改变这个点。

示例：围绕左上角旋转。

.target-element {
  transform-origin: top left; /* 或 0 0 */
  transform: rotate(45deg);
}

示例：从底部边缘进行缩放。

.target-element {
  transform-origin: center bottom; /* 或 50% 100% */
  transform: scaleY(1.5);
}

你可以在一个单独的 transform 属性中应用多个 transform 函数。顺序很重要！

示例：先旋转，然后位移。

.target-element {
  transform: rotate(45deg) translate(100px, 0);
}

示例：先位移，然后旋转（结果可能会不同！）。

.target-element {
  transform: translate(100px, 0) rotate(45deg);
}

Transforms（尤其是 translate 和 scale）通常由浏览器进行硬件加速，因此与操作 top、left 或 margin 等布局属性相比，它们是实现动画的性能更好的选择。

属性	描述
transform	对元素应用 2D 或 3D 变换。
transform-origin	改变变换原点的位置。