CSS中的transform属性详解

描述
CSS的transform属性允许你对元素进行二维或三维空间中的变换操作，包括旋转、缩放、倾斜、平移等。这些变换不会影响文档的布局流（即不会改变其他元素的位置），但会创建新的层叠上下文并影响溢出区域。transform是实现现代网页动态效果的核心属性之一。

变换类型与基本语法
transform的值是一个或多个变换函数，按顺序应用（顺序影响结果）：

transform: none; /* 默认值，无变换 */
transform: function(value) [function(value)]*; /* 一个或多个函数 */

1. 平移（Translate）
平移函数移动元素在空间中的位置：

• translateX(tx)：水平移动，tx为长度值（如10px）或百分比（相对于元素自身宽度）。
• translateY(ty)：垂直移动，百分比相对于自身高度。
• translate(tx, ty)：同时指定水平和垂直移动。
  示例：

.box {
  transform: translateX(20px); /* 右移20px */
  transform: translate(10%, 50px); /* 右移自身宽度的10%，下移50px */
}

2. 缩放（Scale）
缩放函数改变元素尺寸：

• scale(sx)：统一缩放（sx>1放大，0<sx<1缩小，sx<0翻转并缩放）。
• scale(sx, sy)：分别指定水平和垂直缩放。
• scaleX(sx) / scaleY(sy)：单方向缩放。
  示例：

.box {
  transform: scale(1.5); /* 放大1.5倍 */
  transform: scale(1, 0.5); /* 宽度不变，高度缩小一半 */
}

3. 旋转（Rotate）
旋转函数使元素绕指定点转动：

• rotate(angle)：二维旋转，角度单位（如45deg为正时针）。
• rotateX(angle) / rotateY(angle) / rotateZ(angle)：三维旋转（绕X/Y/Z轴）。
  示例：

.box {
  transform: rotate(30deg); /* 顺时针旋转30度 */
  transform: rotateY(180deg); /* 绕Y轴旋转180度（3D效果） */
}

4. 倾斜（Skew）
倾斜函数使元素在平面上扭曲：

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

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

5. 变换原点（transform-origin）
变换原点决定变换的基准点，默认值为元素中心（50% 50%）：

.box {
  transform-origin: left top; /* 左上角为原点 */
  transform-origin: 20px 50%; /* 水平20px处，垂直中心 */
}

6. 多重变换与顺序重要性
多个变换函数按从右到左的顺序应用（实际书写顺序从左到右）：

.box {
  transform: translateX(100px) rotate(45deg); /* 先旋转45度，再右移100px */
  transform: rotate(45deg) translateX(100px); /* 先右移100px，再旋转45度（结果不同！） */
}

7. 三维变换与透视

• 透视（perspective）：为3D变换添加景深，需设置在父元素上或使用perspective()函数：

  .container {
    perspective: 500px; /* 父元素设置透视距离 */
  }
  .box {
    transform: perspective(500px) rotateY(45deg); /* 或使用函数 */
  }
  

• 变换样式（transform-style）：控制子元素是否保留3D空间：

  .container {
    transform-style: preserve-3d; /* 子元素在3D空间中呈现 */
  }
  

注意事项

• 变换后的元素可能溢出容器，需设置overflow: hidden处理。
• 变换可能引起字体模糊（尤其在平移非整数像素时），可通过translateZ(0)触发GPU加速优化。
• 结合transition或animation可实现平滑动画效果。

通过掌握transform的各类函数和顺序逻辑，可高效实现元素的动态变形与空间交互效果。