第一部分:
首先要确定HTML结构,我个人比较使用列表来做:一个ul标签内包含六个li标签,也就是正方体的六个面,然后分别给每个里标签添加class: top、bottom、left、right、before和after。
第二部分:
开始设置样式:首先将ul标签的父元素div设置到你满意的位置,接下来为了使正方体更有立体的感觉,我们先将ul进行旋转微调,同时不要忘记添加绝对定位及过渡时间。代码如下:
div ul{width:200px;height:200px;list-style: none; position:relative;transform: 3s; transform:rotateX(45deg) rotateY(45deg);}
接下来就是讲正方体的六个面位移到相应的位置:首先给li标签先设置下基本样式:
div ul li{width:200px;height:200px;position:absolute;opacity:0;}
左面:先向X轴的负方向位移100px,接着再将它沿着Y轴旋转90deg。
右面:先向X轴的正方向位移100px,接着再将它沿着Y轴旋转90deg。
上面:先向Y轴的负方向位移100px,接着再将它沿着X轴旋转90deg。
下面:先向Y轴的正方向位移100px,接着再将它沿着X轴旋转90deg。
正面:直接沿着Z轴正方向位移100px。
反面:直接沿着Z轴负方向位移100px。
这样正方体就已经初步完成了,可以设置下背景颜色,同时可以添加opacity:.5;,半透明的状态能够更清楚观察3D效果。代码如下:
div ul li.left{background:#f99;opacity:.5;transform:translateX(-100px) rotateY(90deg);}
div ul li.right{background:#99f;opacity:.5;transform:translateX(100px) rotateY(90deg);}
div ul li.top{background:#9f9;opacity:.5;transform:translateY(-100px) rotateX(90deg);}
div ul li.bottom{background:#f0f;opacity:.5;transform:translateY(100px) rotateX(90deg);}
div ul li.before{background:#ff0;opacity:.5;transform:translateZ(100px);}
div ul li.after{background:#f80;opacity:.5;transform:translateZ(-100px);}
第三部分:
最后我们来实线3D旋转效果,最简单的方法:我们可以直接选择ul的父元素div,设置:div:hover{transform:rotateY(360deg);},鼠标悬停时,第v沿着Y轴顺时针旋转360deg。同时记得给div添加属性:3D效果:transform-style:preserve-3d;以及过渡时间:transition:3s;
2020.2.22
逆战班