Css+Html 特效实现3D旋转爱心+立方体(一)
需要考虑的因素:如何将平面的2D图形转换为3D图形。
解决方法:
先将平面上的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个字节点 经验与技巧:当“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轴,以及角度: |
动画效果:
一个网页版的立方体就做好啦。