HTML5 CSS3制作正方体3D效果
随着HTML5 CSS3的出现和发展，使得我们的网页可以实现更加复杂的效果，也使得我们的浏览体验更加丰富，所以今天我们将制作一个正方体的3D效果：
正方体需要六个面；那么我们就写一个ul列表，里面有六个li分别代表着正方体的六个面,而最外层的ul则可以作为这个正方体的参照物，代码如下：
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> <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>
第一次写，写的不好，见谅！！
