CSS 3D变形动画属性 之逆天立方体叠加动画

上一篇，
juejin.im/post/5993d9…
把立方体的盒子搭出来以后，由于怕文章又臭又长（嗯，就是没有想好玩什么效果，偏不告诉你）关于动效没有作更多的处理，只作了一个绕Y轴旋转，这篇试着作几个效果，CSS3 3D变形的坑太大，一时半会的也填不满，先探探路。
燃鹅，这种跑死浏览器的3D动效实际用处很少，各位看看就好，我也仅仅是有兴趣鹅已。

1. 轻松改变各类效果

为了让3D动效发挥最大程度的头晕眼花，我在搭立方体的时候特地用了<SVG>做为组成各个面的图形元素，若是用<div>的话，诚然，能够利用CSS3的一些属性来实现一些渐变、描边、方格等等效果，但灵活性与<SVG>不能比。好比，我先来个立体框的效果。为了让舞台更大一些，我从新作了定义，因此依旧放上dom结构。
具体的各个面组成元素就再也不一一解释了，能够看上篇。总之就是6个<SVG>组成了6个面，如今这个案例里，我用的是最基础的，六个矩形<rect>。

<div class="stage">
<div class="content">
<svg   id="cubic1" xmlns="http://www.w3.org/2000/svg" >
<rect   height="200" width="200" />
</svg>
<svg   id="cubic2" xmlns="http://www.w3.org/2000/svg" >
<rect   height="200" width="200" />
</svg>
<svg   id="cubic3" xmlns="http://www.w3.org/2000/svg" >
<rect   height="200" width="200" />
</svg>
<svg   id="cubic4" xmlns="http://www.w3.org/2000/svg" >
<rect   height="200" width="200" />
</svg>
<svg   id="cubic5" xmlns="http://www.w3.org/2000/svg" >
<rect   height="200" width="200" />
</svg>
<svg   id="cubic6" xmlns="http://www.w3.org/2000/svg" >
<rect   height="200" width="200" />
</svg>
</div>
</div>复制代码

CSS部分以下，我从新优化了一下，便于动效的设定。

.stage {
width: 1000px; height: 1000px;   
/*更大的舞台*/
background:#e5fffb;
perspective:1000px;             
/*透视原点定义的比较大是让立方体尽量不变形*/
}

@keyframes content{
to {transform:rotateX(360deg) rotateY(360deg);} 
}                                 
/*定义一个绕X轴和Y轴同时360度旋转的动画*/

.content{
transform-style: preserve-3d; 
animation:content 3s linear both  infinite ;
position: absolute;top:400px; left:400px;
width:200px; height:200px
}

#cubic1{transform:translateZ(100px);}
#cubic2{transform:translateZ(-100px);}
#cubic3{transform:rotateX(90deg) translateZ(-100px)}
#cubic4{transform:rotateY(-90deg) translateZ(100px)}
#cubic5{transform:rotateX(-90deg)translateZ(-100px);}
#cubic6{transform: rotateY(90deg) translateZ(100px);}
rect{fill:none; stroke-width:3; stroke:#f29a76}
SVG {opacity:1;position: absolute;width:200px; height:200px}复制代码

如今动画效果是下面这种：

关于旋转的容器content我并无给予transform-origin即旋转基点的定义，对于三维动画而言，transform-origin(x y z)最多能够定义三个值，X轴、Y轴和Z轴的偏移值，缺省值为(50% 50% 0)，也就是容器的中心点。 由于这里面涉及到两个原点，透视原点和变形原点，因此必定要搞清楚各自的归属，透视原点是舞台stage的属性，这个决定了立方体的表现形式，而变形原点则是执行变形动画的元素的属性，这个决定了立方体的运动形式。
好比说若是我改变transform-origin的值，就能够获得下面这种动画：

立方体的运动轨迹发生变化，立方体的表现形式是不变的。

而改变透视原点的效果则是下面这种：

与上面的正好相反，立方体的运动轨迹不变，但表现形式发生了变化。

好了，拿那个绕着本身的中心点旋转的规规矩矩的立方体做为基础模板，玩一些叠加的动效。首先弄清楚一点，目前进行3D旋转的是咱们定义为content，也就是包含了六个<SVG>的<div>，而<SVG>自己，尚未发挥本身的特长呢。之前作过不少<SVG>的动效，如今叠加几个试试，看能不能让系统崩溃（o(╥﹏╥)o）。

2. 两个套在一块儿的立方体

严格来讲，这只是个效果，并无发挥上面啰啰嗦嗦半天强调的<SVG>的灵活性。但这也是灵光一现的想法，因此感受效果还好。先说思路，想作一个立方框里套的一个立方体。原本呢，我是很想把CSS部分简化，看能不能只用一套立方体的定义来实现，后来呢，尝试了一下就放弃了，因此任劳任怨的又造了一个小的立方体出来。CSS部分就不重复了，无非改了一下宽度、高度、位移值的定义。这里想说的是关于旋转角度的定义。
关于立方体旋转角度，咱们是这样定义的：

@keyframes content{
to{transform:rotateX(360deg) rotateY(360deg);}
}复制代码

这里我要作的小立方体，容器命名为content2，为了让效果更出彩，我但愿做为内核的小立方体与外面的大立方体旋转方向相反，若是这么定义transform:rotateX(-360deg) rotateY(-360deg)，那就很无语了，由于这样会获得下面这种神同步的两个立方体。

正确的定义方法以下：

@keyframes content2{
0%{transform:rotateX(-180deg) rotateY(-180deg);}
100%{transform:rotateX(180deg) rotateY(180deg);}
}复制代码

DuangDuangDuang，看下效果如何（顺手改了一把透明度）：

这超时空的感受。科技感满满有木有。有时候不得不感慨，CSS3真是逆天啊。不过这里老是有一种转着转着核立方体超过框立方体的瞬间，待有空再优化。

3. 配合描边动画的3D动效

先把小立方体删了。关于描边动画能够看看我之前的文章，有详解，这里只放CSS部分和效果。我但愿获得一个在旋转的过程当中进行描边的动画。每一个<SVG>只须要增长一个描边动画就能够了。DOM部分不用处理，CSS须要增长一个描边动画的设置：

@keyframes dash {
to {
stroke-dashoffset: 0;
}
}复制代码

而后每一个<SVG>去调用这个描边动画，作好延迟时间的定义。由于每一个矩形的周长相同，都是800，因此我进行了统一的定义。

#cubic1{transform:translateZ(100px); animation: dash 1s linear forwards;}
#cubic3{transform:rotateX(90deg) translateZ(-100px);animation: dash 1s linear 1s forwards}
#cubic2{transform:translateZ(-100px); animation: dash 1s linear 2s forwards}
#cubic4{transform:rotateY(-90deg) translateZ(100px);animation: dash 1s linear 3s forwards }
#cubic5{transform:rotateX(-90deg)translateZ(-100px);animation: dash 1s linear 4s forwards }
#cubic6{transform: rotateY(90deg) translateZ(100px); }
.content SVG {opacity:1;position: absolute;width:200px; height:200px;stroke-dasharray: 800; stroke-dashoffset: 800;}  /*每一个矩形的周长是800*/复制代码

看一下效果如何：

这里这个动画效果并非很完美，主要是由于每一个矩形都有重合的边，这也是最后一个矩形没有给任何描边动画的缘由，由于轮到这last one，本身的边都被四邻完成了。要想作的尽善尽美，须要把矩形的定义用<polyline points=""/>这种定义多边形的方法去改写，并严格定义起点终点的位置以及描边参数。包括作不一样颜色描边，这里我就再也不费时间去修改了，总之要得出的结论是，结合每一个<SVG> 的动画进行叠加可以获得叹为观止的效果。

4. 配合位移动画的3D动效

作完描边动画，仍然来个基础的，和位移动画叠加。位移动画比描边动画略为复杂的缘由在于描边动画不用考虑6个<SVG>坐标系的变化，而位移动画则受到各自坐标系的影响，不过这里用分离的思想来理解，咱们把位移动画附加给<SVG>里面的元素，各自<SVG>包含独立的位移动画，而后<SVG>进行组合立方体的3D旋转及Z轴位移，最后包含<SVG>的<div>再进行3D旋转动画。后面的两步是使用的模板，那只剩下第一步要完成，就是各自<SVG>包含的独立的位移动画。
先看下拆解的立方体的示意图：

为了偷懒，我把位移动画分红了两类，立方体1和2共用垂直方向的位移动画，三、四、五、6共用水平方向的位移动画。组合后的立方体以下所示：

CSS部分新增两个位移动画

@keyframes move1 {
  to {transform:translateY(160px);} /*矩形宽40，移动160*/
}
@keyframes move2 {
to {transform:translateX(160px);}
}
.move1{animation: move1 2s ease alternate infinite }
.move2{animation: move2 2s ease alternate infinite }复制代码

DOM部分，只须要按咱们的分类， 把定义了垂直位移动画的矩形

<rect  class="move1" height="40" width="200" x="0" y="0"/>复制代码

塞到cubic1和cubic2的<SVG>中。

把定义了水平位移动画的矩形

<rect   class="move2"  height="200" width="40" x="0" y="0"/>复制代码

塞到cubic3、cubic4、cubic5和cubic6的<SVG>中。
就能够获得下面这种叠加位移动画效果的旋转立方体了。（为了效果炫酷，把背景色改为了暗黑系，改改颜色、透明度什么的）

再次声明一遍，用 <SVG>来搭创建方体，真的比 <div>好不少。尤为在这种实现叠加动画动效上。

5. 配合旋转动画的3D动效

基础的动画除了上面的描边、位移，定然是少不了旋转动画咯。不过有了上面的基础，相信旋转动画很轻松就能够完成。这里，咱们前面用的矩形<rect>要暂时退出历史舞台了，如今要用个更适合作旋转动画的二次元元素，充满魔力的六芒星！六芒星的绘制能够直接用多边形<polygon>完成，不过我说过由于我懒，因此我是直接AI画完导出的。
CSS里定义旋转动画以下：

@keyframes magic{
to {transform:rotate(360deg);}
}
.magic{animation:magic 2s linear  infinite; 
transform-origin:50% 50%}复制代码

DOM结构中，须要修改的，仅仅是把组成六芒星的路径塞进每一个<SVG>里。只拿其中一个为例，其余都是粘贴复制的体力活。

<svg   id="cubic1" xmlns="http://www.w3.org/2000/svg" >
<rect  class="base" height="200" width="200" x="0" y="0"/>
 <g class="magic"><!--如下为组成六芒星的路径-->
<path d="M100,20l70.645,122.36H29.355L100,20 M100,18L27.623,143.36h144.753L100,18L100,18z"/>
<path d="M170.645,57.64L100,180L29.355,57.64L170.645,57.64 M172.377,56.64l-144.753,0L100,182L172.377,56.64L172.377,56.64z"/>
</g>
</svg>复制代码

再看一下六个面都叠加的动画效果

效果好坏先不说，你就说晕不晕！晕不晕！反正我作的时候，看了一眼效果，吓得赶忙关闭窗口，转的太恶心了。反正恶心的受不鸟了，索性再恶心点，改了不一样的颜色，又叠加了个半透明的圆形，调整了一下转速。再看看效果：

好吧，反正怎么改都不满意，知道有这么个玩意就好了。

6. 六个面独立进行动画

前面的几个动效，无论怎么说，都是用了相同的动画叠加，要么一块儿转（晕啊，吐啊），要么一块儿移动，要么一块儿描边，那么若是是每一个<SVG>进行不一样的动效再叠加行不行啊？固然能够啊。这是咱们选择<SVG>作立方体的初衷，就是要把它的做用发挥最大化。下面就来一个每一个<SVG>都不一样，动效也不一样的效果。下面先修改<SVG>。（图片来源于网络，不想作不想作，W(￣_￣)W）

好吧，我认可，把 <SVG>修改以后，承诺的六种不一样的效果我不想作了。手累到抽筋，下次再说。88。最后一个动画算是没结尾，下次给动物分别作上动态表情~