这种3D盒子收起来的动画效果是怎么实现的？1分钟就可以教会你。

经过前两节课的学习，大家应该都知道给容器设置3D属性是编写3D动画的前提。

·首先给容器body设置3D动画属性。

·接下来肯定就是要写盒子了，盒子一般有6个面，聪明的各位肯定能够想到先写6个面用来展示盒子的6个平面，这种思路肯定是没有错的。借助动画的3D旋转、3D位移等等属性，肯定可以将6个面去组合组装成一个盒子。但是想要让6个DIV组成盒子进行立体旋转，没有一个平面的支撑其实是白费力气。

·如果先写一个div作为立方体盒子的参考平面，让平面带动6个面进行旋转位移，就变得非常简单了。首先在盒子容器中添加6个div作为盒子6个面，但是记得把盒子的最后两个面用同一个div包裹起来。至于为什么，一会来详细讲解。先看一下实现的效果，好像还不错。

·然后去拆解刚才的动画动作，通过代码的旋转位移实现一个正方体。利用动画属性将组成正方体的平面位移旋转动作进行拆解，利用@keyframes进行逐帧延迟调用，这样就能实现一个完整的动画的演示。

·一个正方体的动画折叠动作就已经写完了，回顾一下最后两个面的折叠。如果想要让两个面变成一个协调的整体，是需要将最后两个面一起产生折叠动作的，拆分开来去写两个平面，无法实现这种合并动画的效果。

·最后给整个平面添加上随机的角度旋转和刚才的折叠动画进行组合，一个完整的盒子折叠动画就完成了。

点赞&关注AUVWEB。