参考博客 周全http://www.cnblogs.com/jc535201285/p/6519693.html
参考网址：http://www.w3cschool.cn/css3/rvwu5flo.html
主页代码：
<body>
<div class="rect-wrap"> <!--舞台元素，设置perspective，让其子元素获得透视效果。-->
<div class="container"> <!-- 容器，设置transform-style: preserve-3d，让其子元素在3D空间呈现-->
<div class="top slide"> <img class="tu" src="images/1.jpg"/></div> <!--立方体的六个面-->
<div class="bottom slide"><img class="tu" src="images/2.jpg"/></div>
<div class="left slide"><img class="tu" src="images/3.jpg"/></div>
<div class="right slide"><img class="tu" src="images/6.jpg"/></div>
<div class="front slide"><img class="tu" src="images/10.jpg"/></div>
<div class="back slide"><img class="tu" src="images/7.jpg"/></div>
</div>
</div>
</body>
样式表：
<style type="text/css">
.rect-wrap {
position: relative;
perspective: 1600px;
}
.container {
800px;
height: 800px;
transform-style: preserve-3d;
transform-origin: 50% 50% 200px; /*设置3d空间的原点在平面中心再向Z轴移动200px的位置*/
}
.slide {
400px;
height: 400px;
position: absolute; //定位
}
.top {
left: 200px;
top: -200px;
transform: rotateX(-90deg);
transform-origin: bottom;
background-color:#FF9;
}
.bottom {
left: 200px;
bottom: -200px;
transform: rotateX(90deg);
transform-origin: top;
background-color:#6FF;
}
.left {
left: -200px;
top: 200px;
transform: rotateY(90deg);
transform-origin: right;
background-color:#9F6;
}
.right {
left: 600px;
top: 200px;
transform: rotateY(-90deg);
transform-origin: left;
background-color:#33F;
}
.front {
left: 200px;
top: 200px;
transform: translateZ(400px);
background-color:#96C; /*立方体前面正对着屏幕，所以不用旋转，只需向Z轴前移动距离*/
}
.back {
left: 200px;
top: 200px;
transform: translateZ(0);
background-color:#69F; /*立方体后面正对着屏幕，所以不用旋转，只需向Z轴后移动距离*/
}
@keyframes rotate-frame {
0% {
transform: rotateX(0deg) rotateY(0deg);
}
10% {
transform: rotateX(0deg) rotateY(180deg);
}
20% {
transform: rotateX(-180deg) rotateY(180deg);
}
30% {
transform: rotateX(-360deg) rotateY(180deg);
}
40% {
transform: rotateX(-360deg) rotateY(360deg);
}
50% {
transform: rotateX(-180deg) rotateY(360deg);
}
60% {
transform: rotateX(90deg) rotateY(180deg);
}
70% {
transform: rotateX(0) rotateY(180deg);
}
80% {
transform: rotateX(90deg) rotateY(90deg);
}
90% {
transform: rotateX(90deg) rotateY(0);
}
100% {
transform: rotateX(0) rotateY(0);
}
}
.container{
animation: rotate-frame 30s linear infinite;
}
.tu{
400px;
height:400px;
}
</style>
效果图示：
