Css+Html 特效实现3D旋转爱心+立方体（一）



立方体

 需要考虑的因素:如何将平面的2D图形转换为3D图形。

 解决方法:

1. 先将平面上的6个DIV拼接在一起。形成一张类似由3d立方体图形展开的平面图。如图所示:

知识点：将DIV合在一起，将会用到定位的知识，将立方体包起来需要一个大盒子DIV，所以总共需要7个DIV，这七个DIV，将以大盒子为参考点（position:relative），剩下的6个子盒子，每一个都是绝对定位，定位在相应的位置上，定位完成后，就是上面的那个样子。

这里逐个定位比较麻烦，这里可以使用css3的选择器，讲解如下：

E:nth-child(n) 选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。比如：       p:nth-child(n){background:red}  表示E父元素中的第n个字节点       p:nth-child(odd){background:red}/*匹配奇数行*/       p:nth-child(even){background:red}/*匹配偶数行*/       p:nth-child(2n){background:red}/*其中n是从0开始计算*/      经验与技巧:当“E:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。

具体使用例子：

可以逐个定位每一个子盒子啦，是不是更方便啦，

这样第一步就完成了。（注意，为了后面更好的观察这个立方体，我们应该将这个图形居中方式，提倡方式：margin：垂直间距  auto ）。

2）我们需要将每一个面旋转到相应的位置上。每一个面的旋转轴都是不一样的。上下，左右，分别对应的旋转轴,以及旋转角度分别是：bottom(90deg),top(-90deg),right(90deg),left(-90deg),

以上边为例，css3代码如下：

值得注意的是：在旋转后面的时候。旋转轴为Z轴，并不是上下，左右边。首先我们来了解一下浏览器上面的坐标系。

其中Z轴是屏幕里外两个方向（向外为正，向里为负），X轴的水平方向（向右为正，向左为负），Y轴的竖直方向（向下为正，向上为负）。

了解完上面的知识后，就可以实现将后边的面向里移动啦，通俗来说，就是将“后”面沿着Z轴向里移动整个Div的宽度，大小，CSS3代码如下：

完成第二步的操作后，就会达到下面的效果。

3）第三步呢，就是最关键的步骤啦，需要为body加上perspective(景深，简单来说就是设置元素被查看位置的视图，范围在800-1000px),

注意：这里是为body标签加上这个属性，并不是给整个立方体的大盒子加上这个属性，因为我们得从比自身更高的一个地方去查看这个图形，（俗话说，站得高，才能看得远嘛。），示例代码：

接下来我们要做的就是设置一下所处环境，当然，这个地方我们要设置成3D的环境啦，具体的语法形式如下：

然后我们让立方体旋转起来，以便更好的观察3D效果。首先找到旋转中心（这里的旋转中心是立方体的几何中心，）

加上动画过渡，以及旋转角度和旋转轴就搞定咯。

动画过渡时间； 旋转轴为Y轴，以及角度：

动画效果：

一个网页版的立方体就做好啦。