透视与3D空间

CSS3 的 3D 变换和透视功能为网页设计带来了全新的空间感。通过简单的代码，平面元素可以转化为具有深度和立体感的对象，让用户获得更沉浸的交互体验。

透视原理与 CSS3 实现

透视是模拟人眼观察三维空间的核心机制。在 CSS3 中，perspective 属性定义了观察者与 z=0 平面的距离，数值越小透视效果越强烈。这个属性需要设置在父容器上：

.container {
  perspective: 1000px;
}

当子元素在 Z 轴移动时，浏览器会根据这个透视值自动计算变形比例。例如以下代码会让卡片在悬停时产生空间推进效果：

.card {
  transform: translateZ(0);
  transition: transform 0.5s;
}
.card:hover {
  transform: translateZ(100px);
}

3D 变换坐标系

CSS3 使用三维笛卡尔坐标系：

• X 轴：水平向右
• Y 轴：垂直向下
• Z 轴：垂直于屏幕

常用变换函数包括：

.transform-example {
  transform: 
    rotateX(45deg)    /* 绕X轴旋转 */
    rotateY(30deg)    /* 绕Y轴旋转 */
    translate3d(10px, 20px, 30px); /* 三维位移 */
}

变换样式保留

进行复杂 3D 变换时需要设置 transform-style：

.scene {
  transform-style: preserve-3d;
}

这个属性确保子元素在三维空间中保持立体关系，而不是被压扁到二维平面。典型的应用场景是制作立方体：

<div class="cube">
  <div class="face front">Front</div>
  <div class="face back">Back</div>
  <!-- 其他四个面 -->
</div>

.cube {
  transform-style: preserve-3d;
  transform: rotateX(15deg) rotateY(30deg);
}
.face {
  position: absolute;
  width: 200px;
  height: 200px;
}
.front { transform: translateZ(100px); }
.back { transform: rotateY(180deg) translateZ(100px); }

背面可见性

控制元素背面是否可见：

.card {
  backface-visibility: hidden;
}

这个属性在制作翻转卡片时特别有用：

.flip-card {
  transition: transform 1s;
  transform-style: preserve-3d;
}
.flip-card.flipped {
  transform: rotateY(180deg);
}

透视原点调整

perspective-origin 属性改变消失点位置：

.stage {
  perspective: 1200px;
  perspective-origin: 75% 25%;
}

这个设置会让三维变形产生斜角透视效果，类似从侧上方观察物体。

性能优化技巧

使用 3D 变换时需要注意：

1. 优先使用 transform3d() 而非 transform2d() 以触发硬件加速
2. 为动画元素设置 will-change 属性：

.animated-element {
  will-change: transform;
}

3. 避免在大型元素上使用复杂 3D 变换

实际应用案例

创建三维画廊：

<div class="gallery">
  <div class="photo"></div>
  <div class="photo"></div>
  <!-- 更多照片 -->
</div>

.gallery {
  perspective: 2000px;
}
.photo {
  transition: transform 0.8s;
  transform: rotateY(20deg);
}
.photo:hover {
  transform: rotateY(0) scale(1.1);
  z-index: 10;
}

浏览器兼容性处理

虽然现代浏览器普遍支持 3D 变换，但仍需考虑回退方案：

@supports not (transform-style: preserve-3d) {
  .fallback {
    /* 二维替代方案 */
  }
}

高级透视控制

通过 JavaScript 动态控制透视：

element.addEventListener('mousemove', (e) => {
  const x = e.clientX / window.innerWidth;
  const y = e.clientY / window.innerHeight;
  element.style.transform = `
    perspective(1000px)
    rotateX(${y * 20}deg)
    rotateY(${x * 20}deg)
  `;
});

这种技术可以创建响应鼠标移动的立体交互效果。