您当前的位置:365bet > HTML5 / CSS3 >

正方体需要六个面;那么我们就写一个ul列表

发布时间:2019-06-23 09:30编辑:admin1阅读(

      随着HTML5 CSS3的出现和发展,使得我们的网页可以实现更加复杂的效果,也使得我们的浏览体验更加丰富,所以今天我们将制作一个正方体的3D效果:

      正方体需要六个面;那么我们就写一个ul列表,365bet里面有六个li分别代表着正方体的六个面,而最外层的ul则可以作为这个正方体的参照物,代码如下:

      我们先对最外层的参照物ul进行设置一下,此处需要一个CSS3的属性:transform-style:preserve-3d; 此属性是将元素放置到3D维度中;

      运用CSS3的transform将第一个li旋转90度,之后之后沿着Z轴移动-100像素,365bet这时候一个面就制作好了

      前后面此时是不需要旋转的,只需要沿着Z进行移动即可,他们的位置只是前后关系

      此时会发现六个面并未组装成我们理想的样子,而是一条竖线排列下来;虽然旋转了。处于3D维度;但是原来的宽高仍然存在占用,此时我们可以将li加入position:absolute;使其脱离标准流;其父级ul需要加上position:relative

      这时li就全部处于ul中,但是我们只能看见一个面,我们可以让这个正方体选装起来,就可以看到3D效果;加一句: