CSS中的transform属性详解

描述
CSS transform属性允许你对元素进行2D或3D变换，包括旋转、缩放、倾斜、平移等。它不会影响文档流布局（相邻元素不会因transform而重新排列），但会创建新的层叠上下文和包含块。transform是实现复杂视觉效果和动画的关键属性之一。

基本语法

transform: none | <transform-function> [<transform-function>]*;

• none：默认值，不应用任何变换。
• <transform-function>：一个或多个变换函数，按顺序从左到右应用。

常见变换函数详解

1. 平移（Translate）
移动元素在二维或三维空间中的位置。

• translateX(tx)：水平方向移动，tx为长度值（如px、%）。
• translateY(ty)：垂直方向移动。
• translate(tx, ty)：同时指定水平和垂直移动。
• translate3d(tx, ty, tz)：三维平移，可开启硬件加速。

示例：

.box {
  transform: translateX(50px); /* 右移50px */
  transform: translate(20px, 30px); /* 右移20px，下移30px */
  transform: translate3d(10px, 20px, 30px); /* 添加Z轴移动 */
}

注意：百分比单位相对于元素自身尺寸计算（例如translateX(50%)移动自身宽度的一半）。

2. 缩放（Scale）
调整元素尺寸，可分别控制各轴向。

• scale(sx)：均匀缩放（sx为倍数，如0.5表示缩小一半）。
• scale(sx, sy)：分别指定水平和垂直缩放比例。
• scaleX(sx) / scaleY(sy)：单方向缩放。
• scale3d(sx, sy, sz)：三维缩放。

示例：

.box {
  transform: scale(1.5); /* 放大1.5倍 */
  transform: scale(0.8, 1.2); /* 宽度缩至80%，高度放大至120% */
}

3. 旋转（Rotate）
绕指定轴旋转元素。

• rotate(angle)：二维旋转，角度单位（deg、rad等）。
• rotateX(angle) / rotateY(angle)：绕X/Y轴旋转（3D效果）。
• rotate3d(x, y, z, angle)：自定义旋转轴。

示例：

.box {
  transform: rotate(45deg); /* 顺时针旋转45度 */
  transform: rotateY(180deg); /* 绕Y轴翻转180度（类似翻牌） */
}

4. 倾斜（Skew）
沿水平或垂直方向倾斜元素。

• skew(ax, ay)：同时指定X/Y轴倾斜角度。
• skewX(ax) / skewY(ay)：单方向倾斜。

示例：

.box {
  transform: skew(10deg, 5deg); /* X轴倾斜10度，Y轴倾斜5度 */
}

变换组合与顺序
多个变换函数按顺序应用，顺序不同结果可能完全不同。例如：

/* 先平移后旋转：移动方向基于原始坐标系 */
.transform1 { transform: translateX(100px) rotate(45deg); }

/* 先旋转后平移：移动方向基于旋转后的坐标系 */
.transform2 { transform: rotate(45deg) translateX(100px); }

3D变换关键属性

• transform-style: preserve-3d：使子元素保留3D位置（默认flat会压平）。
• perspective: 距离值：设置观察者与z=0平面的距离，产生透视效果。
• transform-origin：设置变换原点（默认中心点），如transform-origin: left top。

性能优化建议

• 优先使用translate3d()、scale3d()等3D函数触发GPU加速。
• 避免在动画中同时使用transform和改变布局的属性（如width/left）。

实际应用场景

1. 居中定位：结合top:50%; left:50%; transform: translate(-50%, -50%)实现精确居中。
2. 悬浮动画：transform: scale(1.05)实现鼠标悬停放大效果。
3. 3D卡片翻转：组合使用rotateY()和translateZ()创建立体交互。

通过灵活组合这些变换，可高效实现丰富的动态效果，而无需重排文档流。