CSS 3D变形动画属性 之 立方体叠加动画
把立方体的盒子搭出来之后，因为怕文章又臭又长（嗯，就是没有想好玩什么效果，偏不告诉你）关于动效没有做更多的处理，只做了一个绕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*/
看一下效果如何：
为了偷懒，我把位移动画分成了两类，立方体1和2共用垂直方向的位移动画，3、4、5、6共用水平方向的位移动画。组合后的立方体如下所示：
再次声明一遍，用
<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>
再看一下六个面都叠加的动画效果
效果好坏先不说，你就说晕不晕！晕不晕！反正我做的时候，看了一眼效果，吓得赶紧关闭窗口，转的太恶心了。反正恶心的受不鸟了，索性再恶心点，改了不同的颜色，又叠加了个半透明的圆形，调整了一下转速。再看看效果：
好吧，我承认，把
<SVG>修改之后，承诺的六种不同的效果我不想做了。手累到抽筋，下次再说。88。最后一个动画算是没结尾，下次给动物分别做上动态表情~
