HTML5 CSS3制作正方体3D效果

浏览数：23 / 时间：2015年06月09日

随着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>