CSS 透视图 - CSS

CSS 透视是一种常见的技术，可以改变元素在页面上的位置和形状。通过使用 CSS 属性 perspective 和 transform，我们可以创建 3D 效果的元素和场景。

基本语法

要在元素上应用透视，我们需要设置 perspective 属性。这个属性定义了一个 3D 空间的视角距离，影响了元素的透视效果。例如，我们可以在父元素上设置 perspective: 1000px;，它会影响到它的所有子元素：

.parent {
  perspective: 1000px;
}

接下来，我们可以使用转换属性 transform 来旋转、移动或倾斜元素。例如，我们可以使用 rotateY 转换来使元素水平旋转：

.child {
  transform: rotateY(45deg);
}

最后，我们还可以使用 transform-style 属性来控制子元素是如何渲染的。默认情况下是 flat，表示子元素以平面方式绘制。但是如果我们把它设置为 preserve-3d，子元素将继承父元素的透视和转换效果，形成复杂的 3D 布局。

.parent {
  perspective: 1000px;
  transform-style: preserve-3d;
}

实际应用

通过使用透视，我们可以创建出现实中不存在的 3D 效果。例如，在一个平面的网格中，我们可以使用透视和旋转来创建一个简单的旋转魔方：

.container {
  perspective: 1000px;
}

.cube {
  width: 80px;
  height: 80px;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-40px);
}

.front,
.back,
.left,
.right,
.top,
.bottom {
  width: 80px;
  height: 80px;
  position: absolute;
  border: 1px solid black;
}

.front {
  transform: rotateY(0deg) translateZ(40px);
}

.back {
  transform: rotateX(180deg) translateZ(40px);
}

.left {
  transform: rotateY(-90deg) translateZ(40px);
}

.right {
  transform: rotateY(90deg) translateZ(40px);
}

.top {
  transform: rotateX(90deg) translateZ(40px);
}

.bottom {
  transform: rotateX(-90deg) translateZ(40px);
}

这里的 container 就是父元素，使用了 perspective 来创建透视效果。cube 是子元素，使用了 transform-style: preserve-3d 来启用 3D 布局，然后使用 translateZ 属性来把它拉到视点前面（视点在立方体的后面）。

其他的六个子元素都是 front、back、left、right、top、bottom，它们分别对应方块的六个面。通过应用 rotate 转换，使它们在 3D 空间中旋转到正确的位置。结果是一个简单的旋转魔方，可以通过鼠标或手指滑动来玩耍。

总结

使用 CSS 透视可以创造出各种各样的 3D 效果。要了解更多高级技术，建议先学会 CSS 3D 变换，然后再深入学习 CSS 透视的使用。