纯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，就可以预览效果！