Css+Html 特效实现3D旋转爱心+立方体(一) | 您所在的位置:网站首页 › 用正方形做的爱心 › 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个字节点 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代码如下: 完成第二步的操作后,就会达到下面的效果。 接下来我们要做的就是设置一下所处环境,当然,这个地方我们要设置成3D的环境啦,具体的语法形式如下: 然后我们让立方体旋转起来,以便更好的观察3D效果。首先找到旋转中心(这里的旋转中心是立方体的几何中心,) 加上动画过渡,以及旋转角度和旋转轴就搞定咯。 动画过渡时间; 旋转轴为Y轴,以及角度: 动画效果: 一个网页版的立方体就做好啦。 |
CopyRight 2018-2019 实验室设备网 版权所有 |