首页手记 css3 制作3D色子并动画讲解原理

css3 制作3D色子并动画讲解原理

标签：

Html/CSS Html5 CSS3

先看一下效果图，演示网页

用到的知识

色子的布局——使用的flex布局，基本可以实现任何想要的效果，十分方便，但兼容性还不是很好，正式项目里需要用postcss处理之后使用。本例没有考虑各种兼容，请在chrome浏览器下查看。关于flex的高级使用，我下次再写，大家可以参考我练习时的一个demo，这次主要讲3D效果的实现。
色子的3D效果——关于3D呢，有webGL，threejs都是做web3D效果的，这个例子我用的是原生的css3里的transform3d属性，其实很简单。

主要属性介绍

一般来讲，绘制立体图形的div嵌套有三层

<div class="camera">
    <div class="stage">
        <div class="box"></div>
    </div>
</div>

想象一下，用一个照相机去拍摄贴在墙上的一个盒子。那么camera就是用来控制照相机的位置，以及变焦的。stage就是墙面，在上面你可以调节盒子的位置，旋转，平移等，那box呢，就是具体绘制这个盒子的一下css样式的载体div了。
来看一张图

这里呢，那个眼睛，就是我们的camera div，我们需要给它加上perspective: 10000px;，这里的10000px就是图中d的长度，相当于你的眼睛离stage 10000px；为什么设这么大呢，你可以到demo里操作一下，当你设为10px的时候，立方体会变得特别大，相当于物体跑到了你眼前，就像一叶蔽目一样。当然这里具体如何精确设置perspective值我也没找到好方法，哪位大神有好方法记得告诉我一下，谢谢了。
接下来我们再看一幅图

这幅图里眼睛的位置上移了，对，没错，perspective-origin属性就是设置这个位置的。默认是50%，50%，即在stage正前方，可以设置的值呢，和background是一样的。
大家可以在demo里玩一下。
然后就到了设置stage，我们需要给它加上一个transform-style: preserve-3d;属性，告诉浏览器，接下来的div以及子元素要展示一个3D空间啦~，默认值是flat，扁平的，也就没有z轴上的体验。
最后我们在box里面画我们想要的东西就行了。画完之后都是在一个平面的，我们可以通过transform变换来实现3D效果。

3D位移：CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数；
3D旋转：CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能函数；
3D缩放：CSS3中的3D缩放主要包括scaleZ()和scale3d()两个功能函数；
3D矩阵：CSS3中3D变形中和2D变形一样也有一个3D矩阵功能函数matrix3d()。
具体使用可以参考这里
我demo里的色子，大的框架就是

<div class="wrapper">
<div class="cube">
<div class="side front"></div>
<div class="side back"></div>
<div class="side top"></div>
<div class="side bottom"></div>
<div class="side left"></div>
<div class="side right"></div>
</div>
</div>
span里面是六个面，点击demo里的‘3D原理’，你将看到我将六个在cube平面上的面经过变换后变成了一个色子。至于side里面的一些div，就是用来制作色子样式的了，参考这里。github
大家可以下载源码看一下。