立体的视觉体验，用CSS3打造3D旋转透视

2024-01-11 03:21:15

立体视觉体验：使用CSS3 构建3D旋转透视

引子

3D动画正以它直观而丰富的形式，深刻地改变着各个领域的展示效果。从阿里云到华为云，再到webpack官网，无处不体现着它所带来的震撼视觉冲击感。那么，作为新时代优秀IT工作者，不掌握CSS3 3D动画怎么能行呢？现在让我们开始吧！

CSS3 3D动画原理

CSS3 3D动画的实现原理基于“透视投影”，它是通过模拟人眼观看物体时的视觉效果来实现3D视觉的。当为元素定义了perspective属性时，它的子元素就会形成透视效果，该元素成为“容器元素”。当子元素被赋予translate、rotate、scale等变换属性时，便可实现3D动画效果。变换的程度则由perspective属性的值决定，它代表了容器元素到观察者的距离。

实战案例：使用CSS3构建3D旋转透视

为了加深理解，让我们通过一个实战案例来演示如何使用CSS3实现3D旋转透视效果。我们首先创建以下HTML结构：


<div class="container">
  <div class="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>
</div>

我们将使用CSS来对这个结构进行样式化，实现3D旋转透视效果：


.container {
  width: 400px;
  height: 400px;
  perspective: 1000px;
}

.cube {
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.face {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 1px solid black;
  backface-visibility: hidden;
}

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

.back {
  transform: translateZ(-100px);
  transform-origin: 0% 0%;
}

.left {
  transform: translateX(-100px) rotateY(90deg);
  transform-origin: 0% 50%;
}

.right {
  transform: translateX(100px) rotateY(-90deg);
  transform-origin: 100% 50%;
}

.top {
  transform: translateY(-100px) rotateX(90deg);
  transform-origin: 50% 0%;
}

.bottom {
  transform: translateY(100px) rotateX(-90deg);
  transform-origin: 50% 100%;
}