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


立方体

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

 解决方法:

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

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

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

E:nth-child(n) 选择器用来定位某个父元素一个或多个特定的子元素。其中“n”是其参数,而且可以是整数值(1,2,3,4),也可以是表达式(2n+1-n+5)和关键词(oddeven),但参数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轴,以及角度:


动画效果:

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

展开阅读全文

没有更多推荐了,返回首页