CSS3的癫疯展现——3D立方体动画（你要的全景视图来了）

上篇CSS3 3D属性入门篇受到了别人的嗤之以鼻，一万点伤害值，好吧，你要的全景视图来了。（哈哈，打击是进步的阶梯！）。今次就来个你们用3D属性最爱炫技的场景，旋转的立方体，有人声称这种动画简直表明了CSS3的癫疯，不不，是巅峰。作完以后只想吼一声，你说的没差！由平面动效进阶到立体动效真是……立方体六个面要作足足六种不一样的设置，因此那些玩八面体，十二面体，……等等的，大写的“服”字。其余人作的立方体3D动画，看了几个，差很少都是<div>实现的，嗯哼，我用<SVG>来作一下吧，至于缘由嘛，后面揭晓，固然，若是失败的话，此句请自动忽略。

1. 先立起来

不可避免的，要先来个基础图形。错错错，是基础物体，反正就是个须要立体的东西，随便怎么称呼。基本上有两种方法能够实现，先来一种直观好理解的。

看上面这张图，我把立方体的六个面平铺开，右上角的那个是后面。此时，假设立方体是在视线正前方，好了，面有了，如今须要把它们折叠起来，像折纸盒同样，组成一个立方体。先看一下dom结构。

<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>复制代码

很是简单，我定义了两个容器，一个是舞台stage，一个是包裹立方体的content，content里是6个SVG，每一个SVG只有一个简单的矩形rect。个人目的是让content在stage里进行3D动效变化。

CSS定义以下：

.stage {width: 800px; height: 600px; background:#e5fffb; perspective:1000px;}
.content{transform-style: preserve-3d}
#cubic1{fill:#f29a76}
#cubic2{fill:#61BFBE}
#cubic3{fill:#BADDD6}
#cubic4{fill:#FFB5BA}
#cubic5{fill:#866667}
#cubic6{fill:#E25D6E}
SVG {position: absolute;top:200px; left:300px;width:200px; height:300px}复制代码

6个SVG都是宽200，高200，虽然里面的矩形<rect>也都是相同尺寸，却没有进行统一的定义，是由于想尝试后期给每一个SVG定义不一样的动画属性。容器的摆放关系以下图：

目前，经过position属性的设置，六个面是重叠在一块儿的，所以，在折叠以前，先把每一个方块挪到本身对应的位置。移动的CSS属性就很简单了。根据图示，cubic1，也就是正对着咱们的面，不须要移动，其余增长transform: translate相应的属性设置，定义以下：

#cubic2{fill:#61BFBE;transform: translateZ(-200px)} /*后面远离屏幕200px移动*/
#cubic3{fill:#BADDD6;transform: translateY(-200px)} /*上面垂直向上200px*/
#cubic4{fill:#FFB5BA;transform: translateX(200px)} /*右面水平向右200px*/
#cubic5{fill:#866667;transform: translateY(200px)} /*下面垂直向下200px*/
#cubic6{fill:#E25D6E;transform: translateX(-200px)} /*左面水平向左200px*/复制代码

移动以后的效果是下面这种（闲着也是闲着，我把移动过程作了动效）：

好了，如今各在其位，下面要各司其职，进行折叠了。

这里有一点要说明，就是移动过以后，关于坐标系的变化，拿其中一个面cubic4为例来讲，当发生水平向右移动200px后，此时坐标系也会发生变化一样的位移，所以在作折叠（旋转）90度的3D变形时，旋转的基轴虽然在原坐标系是右边的垂直轴，但对于移动后的坐标系，变成了左边的垂直轴，所以，对应的变形原点的设置为 transform-origin: center left。举一反五，其余的几个就不一一细说了，直接放上增长3D旋转后的CSS3属性（cubic2仅仅发生了Z轴方向的位移，没有旋转动画，因此无需设置）。

#cubic3{fill:#BADDD6;transform: translateY(-200px) rotateX(90deg) ;transform-origin: bottom center;}
#cubic4{fill:#FFB5BA;transform: translateX(200px) rotateY(90deg);transform-origin: center left;}
#cubic5{fill:#866667;transform: translateY(200px) rotateX(-90deg);transform-origin:top center;}
#cubic6{fill:#E25D6E;transform: translateX(-200px) rotateY(-90deg);transform-origin: center right;}复制代码

完成以后，效果是下面这种：

（这特么是否是在逗我，就一个平面非说是个立方体……！）别急，就知道你会这样说，因此我用动效展现一下这个过程：

此处应有动画！！应有动画！！应有动画！！（我忘记录屏了，天雷滚滚）

这下信了吧？其实这货就是个立方体，货真价实，只不过咱们没有给最外层的容器（也就是3D变形的舞台）设置透视点位置，默认是屏幕正前方，因此你只看到了一面。来来来，我把透明度调整一下，再改改透视原点的位置，效果是下面这种。哟，立方体出来了。

上面说过，关于立方体的组成有两个方法，咱们第一种是用了先平移后折叠，那第二种就是先折叠后平移了。说到这里，可能会不解，无所谓了管它呢，有甚区别，我本身作的过程当中感受差异还蛮大，下面这种方法要求对空间的理解能力更强，但代码却优化了不少，省去一干 transform-origion的设置。在上面的组合立方体的过程当中，咱们把面向本身的那一面做为了二维的基面，其余方形都是基于此进行了变换，也就是说最后组成的立方体从三维角度来讲，是向背离屏幕的Z轴进行延伸的（表明背面的cubic2进行了Z轴负向的位移）。
此次，咱们假定组成后的立方体的中心就是坐标系的原点，首先，我仍然是用绝对定位法把全部的组成面都固定到容器统一的位置，只进行位移的正面和背面不用管，先来进行3D方向的旋转。依旧用动画表示吧。这里为了能看到效果，我把舞台stage的透视原点定义为偏右下方 perspective-origin:80% 80%。

动画效果有了，只是因为透视点的方向问题，结果彷佛少了两个面，再把透视点改为偏左上 perspective-origin:20% 20%看一下：

完成第一步的旋转，下面就是要进行全体位移了，那么重点来了。
以左面cubic6为例，以下图所示：

在进行3D旋转变形后，坐标系也相应的作了旋转变形，从视觉角度来看，作完选择变形后的cubic6要进行向左移动100px的水平位移，但因为坐标系变形的缘故，对于其自己旋转后的坐标系而言，此时水平方向变成了Z轴，所以水平位移也就变成了 translateZ。 把第二种方法造成立方体的动画看一下：

方法二之因此更优化，是由于关于六个cubic的定义简化以下：

#cubic1{fill:#f29a76;transform:translateZ(100px);}
#cubic2{fill:#61BFBE;transform:translateZ(-100px);}
#cubic3{fill:#BADDD6;transform:rotateX(90deg) translateZ(-100px)}
#cubic4{fill:#FFB5BA;transform:rotateY(-90deg) translateZ(100px)}
#cubic5{fill:#866667;transform:rotateX(-90deg)translateZ(-100px)}
#cubic6{fill:#E25D6E;transform: rotateY(90deg) translateZ(100px)}复制代码

2. 再转起来

基础部件已经搭起来了，下面就让这个立方体动起来。说立方体很差理解，但咱们在作的时候把它放到了一个content<div>容器里，所以，让这个容器作一些变换就能够了。至于用哪一种方法获得的立方体，此处随意，我用了二。先来个最简单的绕Y轴旋转的，CSS部分以下：

@keyframes content{
to{transform: rotateY(360deg)translateZ(20px)}
}
.content{transform-style: preserve-3d; animation:content 2s linear both infinite; }复制代码

效果：

写到这里暂时停一下，剩下的放到另外一篇吧，我要好好想一下关于3D能作哪些炸裂的效果。等更新。