HTML5CSS3制作正⽅体3D效果
随着HTML5 CSS3的出现和发展，使得我们的⽹页可以实现更加复杂的效果，也使得我们的浏览体验更加丰富，所以今天我们将制作⼀个正⽅体的3D效果：
正⽅体需要六个⾯；那么我们就写⼀个ul列表，⾥⾯有六个li分别代表着正⽅体的六个⾯,⽽最外层的ul则可以作为这个正⽅体的参照物，代码如下：
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
rotate属性<li></li>
</ul>
我们先对最外层的参照物ul进⾏设置⼀下，此处需要⼀个CSS3的属性：transform-style:preserve-3d; 此属性是将元素放置到3D维度中；
ul设置如代码：
ul{ transform-style:preserve-3d; width:200px; height:200px; border:1px dotted #ccc; margin:200px auto; }
参照物设置完毕，那么我们就开始制作正⽅体的六个⾯；
设置正⽅体六个⾯的公共属性：
ul li{ width:200px; height:200px; border:1px solid #000;}
公共属性设置好了；就需要设置每⼀个不同的⾯的属性
⾸先制作正⽅体的左侧⾯：
选取第⼀个li元素进⾏设置：
运⽤CSS3的transform将第⼀个li旋转90度，之后之后沿着Z轴移动-100像素，这时候⼀个⾯就制作好了
ul li:nth-of-type(1){ background:#F00; transform:rotateY(90deg) translateZ(-100px);}
同理：右侧⾯积代码：
ul li:nth-of-type(2){ background:#00F; transform:rotateY(90deg) translateZ(100px);}
然后制作制作正⽅体上侧的⾯
不同的是上下⾯需要沿着X进⾏旋转
ul li:nth-of-type(3){ background:#FF0; transform:rotateX(90deg) translateZ(100px);}
同理下侧⾯的代码：
ul li:nth-of-type(4){ background:#0F0; transform:rotateX(90deg) translateZ(-100px);}
上下左右⾯完毕剩下前后⾯
前后⾯此时是不需要旋转的，只需要沿着Z进⾏移动即可，他们的位置只是前后关系
代码如下：
ul li:nth-of-type(5){ background:#F0F; transform:translateZ(100px);}
ul li:nth-of-type(6){ background:#0FF; transform:translateZ(-100px);}
此时会发现六个⾯并未组装成我们理想的样⼦，⽽是⼀条竖线排列下来；虽然旋转了。处于3D维度；但是原来的宽⾼仍然存在占⽤，此时我们可以将li加⼊position:absolute；使其脱离标准流；其⽗级ul需要加上 position:relative
这时li就全部处于ul中，但是我们只能看见⼀个⾯，我们可以让这个正⽅体选装起来，就可以看到3D效果；加⼀句：
ul:hover{ transform:rotateX(360deg) rotateY(360deg)}
看：将⿏标悬停到正⽅体上，就看到⼀个正⽅体旋转了；
完整代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>⽆标题⽂档</title>
<style>
*{ padding:0; margin:0; list-style-type:none}
ul{ transform-style:preserve-3d; width:200px; height:200px; border:1px dotted #ccc; margin:200px auto; transition:all 3s; position:relative} ul:hover{ transform:rotateX(360deg) rotateY(360deg)}
ul li{ width:200px; height:200px; border:1px solid #000; position:absolute}
ul li:nth-of-type(1){ background:#F00; transform:rotateY(90deg) translateZ(-100px);}
ul li:nth-of-type(2){ background:#00F; transform:rotateY(90deg) translateZ(100px);}
ul li:nth-of-type(3){ background:#FF0; transform:rotateX(90deg) translateZ(100px);}
ul li:nth-of-type(4){ background:#0F0; transform:rotateX(90deg) translateZ(-100px);}
ul li:nth-of-type(5){ background:#F0F; transform:translateZ(100px);}
ul li:nth-of-type(6){ background:#0FF; transform:translateZ(-100px);}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
第⼀次写，写的不好，见谅！！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论