CSS中的transform属性详解

描述
transform是CSS中用于对元素进行2D或3D变换的属性。它允许你对元素进行旋转、缩放、倾斜、平移等操作，而不会影响文档的正常流布局。transform不会改变元素的实际占位空间，但会创建一个新的层叠上下文。

变换函数类型
transform的值由一个或多个变换函数组成，多个函数间用空格分隔。

1. 平移变换（Translate）

• translateX(tx)：沿X轴水平移动
• translateY(ty)：沿Y轴垂直移动
• translate(tx, ty)：同时指定X和Y轴移动
• translateZ(tz)：沿Z轴移动（3D变换）
• translate3d(tx, ty, tz)：同时指定三个轴向的移动

/* 向右移动50px，向下移动20px */
.element {
  transform: translateX(50px) translateY(20px);
  /* 等价于 */
  transform: translate(50px, 20px);
}

2. 旋转变换（Rotate）

• rotate(angle)：2D旋转，角度单位deg、rad、grad、turn
• rotateX(angle)：绕X轴旋转（3D）
• rotateY(angle)：绕Y轴旋转（3D）
• rotateZ(angle)：绕Z轴旋转（3D）
• rotate3d(x, y, z, angle)：自定义轴旋转

/* 顺时针旋转45度 */
.element {
  transform: rotate(45deg);
}

/* 绕Y轴旋转90度（3D翻转效果） */
.element {
  transform: rotateY(90deg);
}

3. 缩放变换（Scale）

• scale(sx)：X和Y轴等比例缩放
• scale(sx, sy)：分别指定X和Y轴缩放
• scaleX(sx)：仅X轴缩放
• scaleY(sy)：仅Y轴缩放
• scaleZ(sz)：Z轴缩放（3D）
• scale3d(sx, sy, sz)：三轴同时缩放

/* 宽度放大2倍，高度缩小一半 */
.element {
  transform: scale(2, 0.5);
  /* 等价于 */
  transform: scaleX(2) scaleY(0.5);
}

4. 倾斜变换（Skew）

• skew(ax)：X轴倾斜
• skew(ax, ay)：X和Y轴倾斜
• skewX(ax)：仅X轴倾斜
• skewY(ay)：仅Y轴倾斜

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

5. 变换原点（transform-origin）
控制变换的基准点，默认值为元素中心(50% 50%)

.element {
  transform: rotate(45deg);
  transform-origin: 0 0; /* 以左上角为原点旋转 */
  /* 值可以是长度值、百分比或关键字(left/center/right top/center/bottom) */
}

6. 变换顺序的重要性
变换函数的顺序会影响最终效果，因为每个变换都是基于前一个变换后的坐标系进行的。

/* 先平移后旋转：元素先向右移动100px，然后以原始位置为基准旋转 */
.element1 {
  transform: translateX(100px) rotate(45deg);
}

/* 先旋转后平移：元素先旋转45度，然后沿着旋转后的坐标系X轴移动 */
.element2 {
  transform: rotate(45deg) translateX(100px);
}

7. 3D变换相关属性

• perspective：设置透视距离，创建3D空间
• transform-style: preserve-3d：子元素保留3D位置
• perspective-origin：确定观察者位置
• backface-visibility：控制元素背面是否可见

.container {
  perspective: 1000px; /* 观察者距离 */
  transform-style: preserve-3d; /* 保持3D变换 */
}

.element {
  transform: rotateY(45deg);
  backface-visibility: hidden; /* 背面不可见 */
}

8. 性能优化建议

• 优先使用transform和opacity制作动画，因为它们可以通过GPU加速
• 避免在动画中频繁改变transform-origin
• 对于复杂变换，考虑使用transform3d()强制开启GPU加速

实际应用示例

/* 卡片悬停效果 */
.card {
  transition: transform 0.3s ease;
  transform-origin: center bottom;
}

.card:hover {
  transform: translateY(-10px) scale(1.05) rotateX(10deg);
}

/* 加载动画 */
.loading {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

transform属性为CSS提供了强大的图形变换能力，结合transition或animation可以创建丰富的交互效果，是现代Web动效的核心技术之一。