纯css3实现立方体旋转效果

HTML结构

<div class="wrap">
<div class="cube">
<div class="front">front</div>
<div class="back">back</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</div>

CSS样式

.wrap {
/*perspective:1000px;
perspective-origin: 50% 50%;*/ /*扁平化旋转*/
}
.cube {
position: relative;
left:500px;top:100px;
width: 200px;
height:200px;
transform-style: preserve-3d;
}
.cube div {
border:1px solid #999;
position: absolute;
width: 200px;
height: 200px;
}
.back {

transform: translateZ(-100px) rotateY(180deg);
}
.right {

transform: rotateY(-270deg) translateX(100px);
transform-origin: top right;
}
.left {

transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
.top {

transform: rotateX(-90deg) translateY(-100px);
transform-origin: top center;
}
.bottom {

transform: rotateX(90deg) translateY(100px);
transform-origin: bottom center;
}
.front {

transform: translateZ(100px);
}
@-webkit-keyframes spin {
form { transform: rotateY(0deg); }
to { transform: rotateY(360deg); }
}

.cube {
-webkit-animation: spin 5s  linear infinite;
/*-webkit-animation-fill-mode:forwards;*/  /*循环一次*/
}

直接copy，就可以预览效果！