奇思妙想 CSS 3D 动画 | 仅使用 CSS 能制作出多惊艳的动画？

本文将从比较多的方面详细阐述如何利用 CSS 3D 的特性，实现各类有趣、酷炫的动画效果。认真读完，你将会收获到：

• 了解 CSS 3D 的各种用途
• 激发你新的灵感，感受动画之美
• 对于提升 CSS 动画制作水平会有所帮助

CSS 3D 基础知识

使用 transform-style 启用 3D 模式

要利用 CSS3 实现 3D 的效果，最主要的就是借助 transform-style 属性。transform-style只有两个值可以选择：

// 语法：
transform-style: flat|preserve-3d;
transform-style: flat; // 默认，子元素将不保留其 3D 位置
transform-style: preserve-3d; // 子元素将保留其 3D 位置。

当我们指定一个容器的 transform-style 的属性值为 preserve-3d 时，容器的后代元素便会具有 3D 效果，这样说有点抽象，也就是当前父容器设置了 preserve-3d 值后，它的子元素就可以相对于父元素所在的平面，进行 3D 变形操作。

利用 perspective & perspective-origin 设置 3D视距，实现透视/景深效果

perspective为一个元素设置三维透视的距离，仅作用于元素的后代，而不是其元素本身。

简单来说，当元素没有设置perspective时，也就是当 perspective:none/0 时所有后代元素被压缩在同一个二维平面上，不存在景深的效果。

而如果设置perspective后，将会看到三维的效果。

// 语法
perspective: number|none;

// 语法
perspective-origin: x-axis y-axis;
// x-axis : 定义该视图在 x 轴上的位置。默认值：50%
// y-axis : 定义该视图在 y 轴上的位置。默认值：50%

而 perspective-origin 表示 3D 元素透视视角的基点位置，默认的透视视角中心在容器是 perspective 所在的元素，而不是他的后代元素的中点，也就是perspective-origin: 50% 50%。

通过绘制 Webpack Logo 熟悉 CSS 3D

对于初次接触 CSS 3D 的同学而言，可以通过绘制正方体快速熟悉语法，了解规则。

而 Webpack 的 Logo，正是由 2 个 立方体组成：

.father {
    transform-style: preserve-3d;
    perspective: 200px;
    transform: rotateX(10deg);
}

以其中一个正方体而言，实现它其实非常容易：

一个正方体由 6 个面组成，所以首先设定一个父元素 div，然后这个 div 再包含 6 个子 div，同时，父元素设置 transform-style: preserve-3d；
6 个子元素，依次首先旋转不同角度，再通过 translateZ 位移正方体长度的一半距离即可
父元素可以通过 transform和 perspective
调整视觉角度
以一个正方体为例子，简单的伪代码如下：

<ul class="cube-inner">
  <li class="top"></li>
  <li class="bottom"></li>
  <li class="front"></li>
  <li class="back"></li>
  <li class="right"></li>
  <li class="left"></li>
</ul>

.cube {
    width: 100px;
    height: 100px;
    transform-style: preserve-3d;
    transform-origin: 50px 50px;
    transform: rotateX(-33.5deg) rotateY(45deg);

    li {
      position: absolute;
      top: 0;
      left: 0;
      width: 100px;
      height: 100px;
      background: rgba(141, 214, 249);
      border: 1px solid #fff;
    }
    .top {
      transform: rotateX(90deg) translateZ(50px);
    }
    .bottom {
      transform: rotateX(-90deg) translateZ(50px);
    }
    .front {
      transform: translateZ(50px);
    }
    .back {
      transform: rotateX(-180deg) translateZ(50px);
    }
    .left {
      transform: rotateY(-90deg) translateZ(50px);
    }
    .right {
      transform: rotateY(90deg) translateZ(50px);
    }
}

叠加两个，调整颜色和透明度，我们可以非常轻松的实现 Webpack 的 LOGO：

.father {
    transform-style: preserve-3d;
    perspective: 200px;
    transform: rotateX(10deg);
}
``````sass
.father {
    transform-style: preserve-3d;
    perspective: 200px;
    transform: rotateX(10deg);
}

当然，这里的 LOGO 为了保证每条线条视觉上的一致性，其实是没有设置景深效果 perspective 的，我们可以尝试给顶层父容器添加一下如下代码，通过transform 和 perspective调整视觉角度，设置景深效果：

.father {
    transform-style: preserve-3d;
    perspective: 200px;
    transform: rotateX(10deg);
}

就可以得到真正的 3D 效果，感受很不一样：

.father {
    transform-style: preserve-3d;
    perspective: 200px;
    transform: rotateX(10deg);
}