2D/3D变换

2D/3D变换是CSS3中强大的视觉呈现工具，允许开发者通过代码控制元素在平面或空间中的形态变化。从简单的旋转、缩放，到复杂的透视和三维层次，这些特性为网页设计带来更多可能性。

2D变换基础

2D变换通过transform属性实现，包含以下常用函数：

.box {
  transform: translate(50px, 20px) rotate(30deg) scale(1.2);
}

• 位移(translate)：translateX(),translateY()或合并写法translate()。示例将元素向右移动50px，向下移动20px：

  .move { transform: translate(50px, 20px); }
  

• 旋转(rotate)：以deg为单位指定角度。正值顺时针旋转：

  .spin { transform: rotate(45deg); }
  

• 缩放(scale)：scaleX()单独调整宽度，scale()同时控制宽高。以下示例实现1.5倍放大：

  .enlarge { transform: scale(1.5); }
  

• 倾斜(skew)：创建斜切效果。以下代码产生水平30度倾斜：

  .slant { transform: skewX(30deg); }
  

3D变换进阶

需配合perspective属性建立三维空间。父容器设置视距，子元素进行变换：

<div class="scene">
  <div class="cube">3D元素</div>
</div>

.scene {
  perspective: 800px;
}
.cube {
  transform: rotateY(45deg);
}

核心3D函数

• Z轴位移：translateZ()控制深度移动。正值向用户靠近：

  .pop { transform: translateZ(100px); }
  

• 三维旋转：rotate3d(x,y,z,angle)实现多轴旋转：

  .twist {
    transform: rotate3d(1, 1, 0, 60deg);
  }
  

• 透视原点：perspective-origin改变消失点位置：

  .scene {
    perspective-origin: 25% 75%;
  }
  

变换组合与顺序

变换函数顺序影响最终效果。先旋转后位移与先位移后旋转会产生不同结果：

/* 方案A：旋转后位移 */
.demoA {
  transform: rotate(30deg) translateX(100px);
}

/* 方案B：位移后旋转 */
.demoB {
  transform: translateX(100px) rotate(30deg);
}

变换样式进阶控制

• 变换原点：transform-origin改变基准点。以下示例以右下角为旋转中心：

  .rotate-corner {
    transform-origin: right bottom;
    transform: rotate(45deg);
  }
  

• 矩阵变换：matrix()和matrix3d()实现复杂数学变换：

  .complex {
    transform: matrix(1, 0.3, 0.2, 1, 50, 20);
  }
  

性能优化实践

硬件加速技巧可提升动画性能：

.optimized {
  transform: translateZ(0);
  will-change: transform;
}

避免在过渡中频繁修改perspective属性，建议在父级静态设置。

实际应用案例

卡片翻转效果

<div class="flip-container">
  <div class="flipper">
    <div class="front">正面内容</div>
    <div class="back">背面内容</div>
  </div>
</div>

.flip-container {
  perspective: 1000px;
}
.flipper {
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.flip-container:hover .flipper {
  transform: rotateY(180deg);
}
.front, .back {
  backface-visibility: hidden;
}
.back {
  transform: rotateY(180deg);
}

三维立方体构建

通过六个面组合成立方体结构：

.cube-face {
  position: absolute;
  width: 200px;
  height: 200px;
}
.front { transform: translateZ(100px); }
.back { transform: rotateY(180deg) translateZ(100px); }
.right { transform: rotateY(90deg) translateZ(100px); }
.left { transform: rotateY(-90deg) translateZ(100px); }
.top { transform: rotateX(90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }

浏览器兼容方案

针对旧版本浏览器需要前缀处理：

.legacy {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

可使用PostCSS等工具自动添加前缀。检测3D支持：

const supports3D = window.CSS.supports('transform-style', 'preserve-3d');

变换与动画结合

配合@keyframes创建复杂动画：

@keyframes spin {
  0% { transform: rotateY(0); }
  100% { transform: rotateY(360deg); }
}
.spinner {
  animation: spin 3s infinite linear;
}

常见问题排查

• 元素闪烁：添加backface-visibility: hidden
• 变换失效：检查容器是否设置transform-style: preserve-3d
• 透视畸变：调整perspective值（通常500-1200px效果较好）