加了一周多的班，这几天终于稍微有点空的时间了。这个3d动态效果是我挺早之前做的，不过在今天以前一直都没什么时间发上来。
进入正题，先来看看这个效果的演示。
下面这是我个人网站上的效果demo
3d骰子demo
现在我一步步在介绍这个效果的实现原理。
首先，跟之前的旋转木马效果的步骤一样，先搭建一个“舞台”，设置好舞台视距。再建好一个容器来放这个骰子。
.block{ padding: 100px 0; perspective: 800px; perspective-orign: 50% 50%; } .dice{ width: 300px; height: 300px; margin: 20px auto; position: relative; transform-style: preserve-3d; }
<div class="block"> <div class="dice"> </div> </div>
block就是舞台，dice就是容器。给舞台设置好舞台视距perspective，以及观察位置perspective-orign。在容器里面设置好transform-style: preserve-3d来设置这个动态的效果是3d的。
然后在dice容器里面加入6个div页面，也就是骰子的6个面。
<div class="block"> <div class="dice"> <div class="page" id="page1">1</div> <div class="page" id="page2">2</div> <div class="page" id="page3">3</div> <div class="page" id="page4">4</div> <div class="page" id="page5">5</div> <div class="page" id="page6">6</div> </div> </div>
设置公共的样式。
.page{ width: 200px; height: 200px; position: absolute; font-size: 200px; color: #fff; line-height: 200px; text-align: center; border: 1px solid gray; background:rgb(88,88,88); }
看看现在页面的样子。
因为位置都是一样的，所以这6个页面都叠在了一起。
然后我们给这个6个页面都单独的设置一下他们摆放的位置。
#page2{ transform: rotateY(-90deg); transform-origin: right; } #page3{ transform: translateZ(-200px); transform-origin: right; } #page4{ transform: rotateY(90deg); transform-origin: left; } #page5{ transform: rotateX(-90deg); transform-origin: top; } #page6{ transform: rotateX(90deg); transform-origin: bottom; }
这里介绍一下这几个设置，rotateX和rotateY的效果就是沿X轴或者Y轴进行旋转。但在旋转的时候必须设置一下transform-origin。这个参数是设置旋转的位置，默认是沿着X轴或者Y轴的中心来进行旋转。我们根据每个页面需要旋转的方向来设置旋转线的位置。translateZ在之前我们就用过了，这个参数的功能是沿着舞台视距来进行移动。
设置好各自的样式之后，再看看页面的效果。
呃，怎么还是只能看到一个页面。我们需要看到另外的几个页面，这怎么办。我们只要把每个页面的背景色设置成有点透明就行了。
把.page样式下的background改成如下所示，加一个50%的透明。
background:rgba(88,88,88,0.5);
现在我们再来看看页面上的效果
现在可以看到后面的页面了，这些页面都已经正确的到了各自的位置上了。
到现在，静态的骰子已经做好了，但是我们需要让它动起来。跟之前的方法一样，我们只需要给这个容器加上动画效果，这个骰子就会动起来了。
跟之前一样，我们需要用到关键帧动画效果,并把这个动画效果加到容器上。
@keyframes random-rotate{ 0%{ transform:rotateX(0deg) rotateY(0deg); } 100%{ transform:rotateX(360deg) rotateY(360deg); } }
.dice{ width: 300px; height: 300px; margin: 20px auto; position: relative; transform-style: preserve-3d; animation: random-rotate 5s linear 0s infinite; }
这个关键帧的效果就是X轴和Y轴都一起从0度变到360度。而在绑定关键帧的时候，我们设置了这个动画的变化时间为5s，线性平滑变化，并让他无限循环。
这样就都OK，大功告成了。不过不知道你有没有发现，这个东西有个小bug，骰子的几个页面在旋转之后，数字显示已经反了。如果小伙伴们如果要用这个例子，就得自己想办法搞定了。
