CSS样式表

*{
margin: 0;
padding: 0;
}
.wrapper{
width: 800px;
height: 600px;
background: #87CEEB;
margin: 0 auto;
position: relative;
}
ul{
position: relative;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
width: 800px;
height: 600px;
transform-style: preserve-3d;
}

ul:hover{
transition: all 5s;
transform: rotateY(360deg);
}

li{
width: 190px;
height: 300px;
border-radius: 15px;
list-style: none;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
}

HTML5结构

<div class="wrapper">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

Script代码

<script type="text/javascript">
var colorBox = ["yellow","green","blue","black","orange","gray","skyblue","red","#ADFF2F"];
for (var i=0;i<8;i++) {
$("li")[i].style.background = colorBox[i];
$("li")[i].style.transform = "rotateY("+(i*45)+"deg) translateZ(300PX)"
}
</script>

最最重要的是：translateZ() 一定要放在rotate之后，不然没作用