随着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>
第一次写，写的不好，见谅！！
时间： 2024-10-12 15:53:19