立体理解 3D 立方体中 perspective 和 translateZ 的关系

2024-01-28 11:21:24

透视（perspective）

透视是一种创建错觉的技巧，让物体看起来具有三维深度。在 3D 立方体中，透视通过向 vanishing point 汇聚平行线来实现。vanishing point 是一个想象中的点，所有平行线都会在该点汇聚。透视的强度由 perspective 属性控制，该属性的值越大，透视效果越强。

平移 Z 轴（translateZ）

translateZ 属性用于将元素沿 Z 轴平移。Z 轴是垂直于屏幕的轴。translateZ 属性的值为正时，元素会向屏幕外移动；translateZ 属性的值为负时，元素会向屏幕内移动。

perspective 和 translateZ 的关系

perspective 和 translateZ 属性协同工作来创建 3D 立方体。perspective 属性创建透视效果，而 translateZ 属性用于将元素放置在三维空间中。通过组合使用这两个属性，可以创建逼真的 3D 立方体。

示例

以下示例演示了如何使用 perspective 和 translateZ 属性创建 3D 立方体：

<!DOCTYPE html>
<html>
<head>

<style>
#cube {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  perspective: 500px;
}

#cube .face {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 1px solid black;
}

#cube .face.front {
  transform: translateZ(100px);
}

#cube .face.back {
  transform: translateZ(-100px);
}

#cube .face.left {
  transform: translateX(-100px) translateZ(50px);
}

#cube .face.right {
  transform: translateX(100px) translateZ(50px);
}

#cube .face.top {
  transform: translateY(-100px) translateZ(50px);
}

#cube .face.bottom {
  transform: translateY(100px) translateZ(50px);
}
</style>
</head>
<body>
<div id="cube">
  <div class="face front">Front</div>
  <div class="face back">Back</div>
  <div class="face left">Left</div>
  <div class="face right">Right</div>
  <div class="face top">Top</div>
  <div class="face bottom">Bottom</div>
</div>
</body>
</html>