``### 当鼠标放在上面旋转
代码如下
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>立方体</title>
<style type="text/css">
* {margin:0; padding:0;}
ul li {list-style:none;}
.box {width:100%; height:100%; margin:200px auto; position:relative; perspective:800px;}
.box ul {width:300px; height:300px; position:absolute;left:0; top:300px; bottom:0; right:0; margin:auto; transform-style:preserve-3d; transition:all 10s; }
.box ul:hover {transform:rotateX(360deg) rotateY(360deg);}
.box ul li {width:300px; height:300px; text-align:center; line-height:300px; position:absolute; font-size:48px; backface-visibility:hidden;}
.box ul li:nth-child(1) {background:rgba(255,0,0,.5); transform:translateY(-150px) rotateX(90deg);}
.box ul li:nth-child(2) {background:rgba(0,255,0,.5); transform:translateY(150px) rotateX(-90deg);}
.box ul li:nth-child(3) {background:rgba(0,0,255,.5); transform:translateX(-150px) rotateY(-90deg);}
.box ul li:nth-child(4) {background:rgba(0,155,255,.5); transform:translateX(150px) rotateY(90deg);}
.box ul li:nth-child(5) {background:rgba(255,0,255,.5);transform:
translateZ(150px);}
.box ul li:nth-child(6) {background:rgba(255,255,0,.5); transform:translateZ(-150px) rotateY(180deg);}
</style>
</head>
<body>
<div class="box">
<ul>
<li>上</li>
<li>下</li>
<li>左</li>
<li>右</li>
<li>前</li>
<li>后</li>
</ul>
</div>
</body>
</html>