上一篇,
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共用垂直方向的位移动画,3、4、5、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"/>

塞到cubic1cubic2<SVG>中。

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

<rect   class="move2"  height="200" width="40" x="0" y="0"/>

塞到cubic3cubic4cubic5cubic6<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。最后一个动画算是没结尾,下次给动物分别做上动态表情~