html{background:pink;height:100%}.wrap{width:10px;height:10px;margin:200px 400px;position:relative}.cube{width:600px;height:400px;margin:0 auto;transform-style:preserve-3d;transform:rotateX(-30deg) rotateY(-80deg);-webkit-animation:rotate 20s infinite;animation-timing-function:linear}@-webkit-keyframes rotate{from{transform:rotateX(0deg) rotateY(0deg)}to{transform:rotateX(360deg) rotateY(360deg)}}.cube div{position:absolute;width:300px;height:300px;opacity:.8;transition:all .4s}.pic{width:300px;height:300px}.cube .out_front{transform:rotateY(0deg) translateZ(150px)}.cube .out_back{transform:translateZ(-150px) rotateY(180deg)}.cube .out_left{transform:rotateY(90deg) translateZ(150px)}.cube .out_right{transform:rotateY(-90deg) translateZ(150px)}.cube .out_top{transform:rotateX(90deg) translateZ(150px)}.cube .out_bottom{transform:rotateX(-90deg) translateZ(150px)}.cube span{display:bloack;width:200px;height:200px;position:absolute;top:50px;left:50px}.cube .in_pic{width:200px;height:200px}.cube .in_front{transform:rotateY(0deg) translateZ(100px)}.cube .in_back{transform:translateZ(-100px) rotateY(180deg)}.cube .in_left{transform:rotateY(90deg) translateZ(100px)}.cube .in_right{transform:rotateY(-90deg) translateZ(100px)}.cube .in_top{transform:rotateX(90deg) translateZ(100px)}.cube .in_bottom{transform:rotateX(-90deg) translateZ(100px)}.cube:hover .out_front{transform:rotateY(0deg) translateZ(400px)}.cube:hover .out_back{transform:translateZ(-400px) rotateY(180deg)}.cube:hover .out_left{transform:rotateY(90deg) translateZ(400px)}.cube:hover .out_right{transform:rotateY(-90deg) translateZ(400px)}.cube:hover .out_top{transform:rotateX(90deg) translateZ(400px)}.cube:hover .out_bottom{transform:rotateX(-90deg) translateZ(400px)}