先来看一个咱们应用在产品中简略的例子:

这种相似翻扑克牌的动画齐全通过 CSS 实现，而真正外围的局部只波及到三个简略属性 perspective, transform, backface-visibility，在上面的文章局部，我会通过例子并逐渐解说分明。

1. 一般的旋转

大家都晓得，css3 的 transform 属性能够对元素进行视觉层面的形变操作，其中蕴含了旋转操作(Rotate)：

@keyframes rotateX {  0% { transform: rotateX(0) }  100% { transform: rotateX(360deg) }}@keyframes rotateY {  0% { transform: rotateY(0) }  100% { transform: rotateY(360deg) }}@keyframes rotateZ {  0% { transform: rotateZ(0) }  100% { transform: rotateZ(360deg) }}.container {  .z-rotateX {    animation: rotateX 10s linear infinite;  }  .z-rotateY {    animation: rotateY 10s linear infinite;  }  .z-rotateZ {    animation: rotateZ 10s linear infinite;  }}

不掉帧的演示和源码能够看这里: https://codepen.io/mongooseso...

这里别离演示了 RotateX、RotateY、RotateZ 旋转 360° 的动画成果，然而成果只是立体的，可能不太容易了解。在上面咱们联合平面的动效来具体阐明。

2. 平面的旋转

只增加了一行 CSS之 后的成果:

.container {  perspective: 800px;  // ......}

不掉帧的演示和源码能够看这里: https://codepen.io/mongooseso...

其实，咱们只增加了 perspective:800px 这一行代码。

那么 perspective 是什么意思呢？

官网的解释是：perspective 指定了观察者与 z=0 立体的间隔，使具备三维地位变换的元素产生透视成果。
咱们能够非常简单的了解为，从屏幕的视角登程，与3D元素容器的间隔。perspective设置的越小，你看屏幕里的3D感觉越近，设置的越大，离得越远。当这个属性存在时，意味着该元素下所有子元素是平面的了。

默认状况下，是以元素的核心作为落脚点，能够了解为你是站在正视着元素的核心看的，如果你须要扭转视角，能够应用 perspective-origin 这个属性。

3. 浏览器坐标系

有一个不得不提的问题的是，RotateX、Y、Z 到底是怎么旋转的？

浏览器的坐标系，程度向右是X轴正方向，竖直向下是Y轴正方向，垂直屏幕向外是Z轴正方向。

举个例子，transform: rotateX(45deg) 示意旋转核心为X轴，顺时针旋转45度。如果参数为正数，那就是逆时针旋转。
在辨认的时候，咱们能够应用左手规定，即左手大拇指指向对应轴的正方向，其余手指蜿蜒的方向就是顺时针方向。

为了便于了解，我找了两张图来阐明

咱们左手对着X轴正方向，手指蜿蜒的方向是朝向Y轴正方向，则能够揣测，旋转45度的成果为：

情谊提醒：不要对着你的共事没事比划左手规定，如果比划的话，千万不要用Y轴方向的。如果你真的用了，请通知我医院的 Wi-Fi 好不好。
所以下面动效应用的 RotateX，Y，Z 是不是都能了解了，同时 RotateZ 产生不了3D成果的起因也能够了解了吧。

4. 翻牌成果

像开篇提到的翻牌成果，又是如何实现的呢？

下面说到 perspective 是对子元素失效的，因而咱们须要一个额定的 cards 容器，两个 div 别离示意侧面和背面。

<div class="container">  <div class="cards">    <div class="card frontface" />    <div class="card backface" />  </div></div>
  • 卡片公共属性

不言而喻，卡片正反面都要指定 position: absolute，这样能力让卡片叠在一起。另外还须要指定，即本文的第二个重要属性 backface-visibility:hidden，这个属性十分好了解。

当一个元素指定 rotateY(180deg) 之后，依据左手规定，元素的侧面朝里，反面对向咱们，如果咱们指定了此属性，即背向咱们的元素咱们不再须要可见。

.card {    position: absolute;  top: 0;  backface-visibility: hidden;}
  • 卡片侧面

卡片侧面不须要做任何非凡解决。

  • 卡片反面

指定 transform: rotateY(180deg) 即可。

.backface {  transform: rotateY(180deg);}
  • cards块

显然，咱们须要给cards块增加transition:transform属性以减少动画成果，另外咱们还须要用上本文的第三个属性transform-style: preserve-3d。

这个属性值示意，这个元素下的所有的子元素处于3D空间中，存在着平面的层级和笼罩关系，如果你的容器元素外部有多个元素波及到重叠的3D变换时，这个属性值是必须的。

.cards {  transition: transform 1s;  transform-style: preserve-3d;}

  • container 块
    最初，作为最外围容器，只须要设置 perspective 让子元素变为平面旋转，另外还须要设置 position: relative 让外部的absolute元素产生参照定位。

    .container {perspective: 800px;position: relative;}

一个简略的示例

具体的源码和Demo在这里: https://codepen.io/mongooseso...

5. 三维魔方

你可能发现过，webpack 官网的 logo 其实就是用 CSS 手写的，所以咱们最初聊一下，怎么联合已有的属性，实现一个立方体的旋转。

先上残缺代码和Demo: https://codepen.io/mongooseso...

  • HTML格局
    同卡片成果相似，咱们的HTML模式大抵如下

    <div class="container"><div class="cubes">  <div class="cube front" />  <div class="cube back" />  <div class="cube top" />  <div class="cube bottom" />  <div class="cube left" />  <div class="cube right" /></div> </div>

  • 父组件款式
    和卡片一样，咱们须要为外层的 cubes 容器和最外层的 container 容器设置3D视角属性

    .cubes {transform-style: preserve-3d;transition: transform 1s;width: 100%;height: 100%;}.container {position: relative;perspective: 400px;width: 200px;height: 200px;}

    这里咱们设置了正方体的边长为200px，以400px的视距来察看

  • 绘制六个面

如果玩过魔方的同学可能晓得，为了便于记录魔方的旋转，咱们通常会给正方体六个面别离命名为前、后、左、右、上、下：

除了向前的那一面毋庸批改以外，其余面都能够认为是向前的一面做了各种旋转得出的后果

后：沿着Y轴顺时针旋转180deg

.back {  transform: rotateY(180deg)}

左：沿着Y轴逆时针旋转90deg(能够好好思考下为什么是逆时针)

.left {  transform: rotateY(-90deg)}

右：沿着Y轴顺时针旋转90deg

.right {  transform: rotateY(90deg)}

上：沿着X轴顺时针旋转90deg

.top {  transform: rotateX(90deg)}

下：沿着X轴逆时针旋转90deg

.bottom {  transform: rotateX(-90deg)}

咱们能够给不同的面标上背景色和花纹用来辨别，此时这六个面还是相互穿插在一起的，咱们还须要进行“地位”的调整

  • 组合六个面

在 Demo 中，咱们设置正方体的边长为200px，而这六个面穿插重叠的核心还是位于正方体的核心，因而咱们须要通过给每个面设置 translateZ(100px) 即可让正方体地位调整正确，例如反面加上当前成为这样的款式

.back {  transform: rotateY(180deg) translateZ(100px);}
  • 绘制动效

接下来就简略了，咱们能够给正方体绘制任何动效，感兴趣的甚至能够进一步绘制出如魔方的打乱和还原过程。

6. 实用场景

应用 CSS 来实现 3D 成果早就不是浏览器的新技术了，然而在理论产品中的利用依然寥寥可数，适当的动效能够晋升产品体验，相同简单的动效会带来审美疲劳和开发累赘。
WebGL 和 D3.js 等等的确是个好货色，然而他们的学习老本和开发成本都很高，须要付出不少的精力能力看到理论的回报，并且利用场景较少。
所以如果你想解脱 2B 场景下干燥的增删改查，2C场景下H5的干燥交互，无妨大胆的应用下应用老本极低的 CSS 3D

The End

如果你感觉这篇文章对你有帮忙，有启发，我想请你帮我2个小忙：
1、点个「赞」，让更多的人也能看到这篇文章内容；
2、关注公众号「豆皮范儿」，公众号后盾回复「加群」 退出咱们一起学习；

关注公众号的福利继续更新，公众号后盾送学习材料：
1、公众号后盾回复「vis」，还能够获取更多可视化收费学习材料。
2、公众号后盾回复「webgl」，还能够获取webgl收费学习材料。
3、公众号后盾回复「算法」，还能够获取算法的学习材料。