纯css3实现3D立方体旋转特效及代码

在网上看到3D立方体特效很酷炫，便想着学习一下，技术小白，大家担待，下面便是我所实现的视觉效果：
用大家熟悉的农药人物看着是不是比较容易感染情绪，嘿嘿。
话不多说，直接上代码（这里要感谢零下一度，毕竟从他那里直接粘来的大部分代码）：

margin:0 auto;

padding:0;

}

@keyframes rotate{

0%{

    transform:rotateX(0deg) rotateY(0deg);

}

100%{

    transform:rotateX(360deg) rotateY(360deg);

}

}

html{

height:100%;

}

.wrap{

margin-top:200px;

perspective: 1000px; /* 视图距元素的距离 相当于摄像机 */

}

.cube{

width:200px;

height:200px;

position:relative;

color:#fff;

font-size:0px;

font-weight:bold;

text-align:center;

line-height:200px;

transform-style:preserve-3d; /* 默认flat 2D */

transform:rotateX(-30deg) rotateY(-70deg); 

animation:rotate 20s infinite linear; /*播放时间 播放次数为循环 缓动效果为匀速 */

}

.cube > div{

width:100%;

height:100%;

border:0px solid #fff;

position:absolute;

background-color:#333;

opacity:.9;

transition:transform 0.4s ease-in;

}

.cube .out-front{

transform: translateZ(100px);

}

.cube .out-back{

transform: translateZ(-100px) rotateY(180deg);

}

.cube .out-left{

transform: translateX(-100px) rotateY(-90deg);

}

.cube .out-right{

transform: translateX(100px) rotateY(90deg);

}

.cube .out-top{

transform: translateY(-100px) rotateX(90deg);

}

.cube .out-bottom{

transform: translateY(100px) rotateX(-90deg);

}

.cube > span{

display:block;

width:100px;

height:100px;

border:0px solid black;

background-color:#999;

position:absolute;

top:50px;

left:50px;

}

.cube .in-front{

transform: translateZ(50px);

}

.cube .in-back{

transform: translateZ(-50px) rotateY(180deg);

}

.cube .in-left{

transform: translateX(-50px) rotateY(-90deg);

}

.cube .in-right{

transform: translateX(50px) rotateY(90deg);

}

.cube .in-top{

transform: translateY(-50px) rotateX(90deg);

}

.cube .in-bottom{

transform: translateY(50px) rotateX(-90deg);

}

.wrap:hover .out-front{

transform: translateZ(200px);

}

.wrap:hover .out-back{

transform: translateZ(-200px) rotateY(180deg);

}

.wrap:hover .out-left{

transform: translateX(-200px) rotateY(-90deg);

}

.wrap:hover .out-right{

transform: translateX(200px) rotateY(90deg);

}

.wrap:hover .out-top{

transform: translateY(-200px) rotateX(90deg);

}

.wrap:hover .out-bottom{

transform: translateY(200px) rotateX(-90deg);

}

img{
width: 100%;

    height: 100%

}

<div class="cube">

    <div class="out-front"><img src="img/1.jpg" class="pic"/></div>

    <div class="out-back"><img src="img/2.jpg" class="pic"/></div>

    <div class="out-left"><img src="img/3.jpg" class="pic"/></div>

    <div class="out-right"><img src="img/4.jpg" class="pic"/></div> 

    <div class="out-top"><img src="img/5.jpg" class="pic"/></div>

    <div class="out-bottom"><img src="img/6.jpg" class="pic"/></div>



    <span class="in-front"><img src="img/7.jpg" class="pic"/></span>

    <span class="in-back"><img src="img/8.jpg" class="pic"/></span>

    <span class="in-left"><img src="img/9.jpg" class="pic"/></span>

    <span class="in-right"><img src="img/10.jpg" class="pic"/></span>

    <span class="in-top"><img src="img/11.jpg" class="pic"/></span>

    <span class="in-bottom"><img src="img/12.jpg" class="pic"/></span>

</div>