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 ）。
css特效文字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轴，以及⾓度：
动画效果：
⼀个⽹页版的⽴⽅体就做好啦。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。