.wrap{perspective:800px;perspective-origin:50% 20px;align-items:center;display:table;margin-left:auto;margin-right:auto}.cube{position:relative;width:200px;transform-style:preserve-3d;height:120px;cursor:pointer;animation:spin2 .5s ease;transform:rotateY(0deg)}.cube div{position:absolute;width:200px;height:100px;font-family:'Open Sans';display:table-cell;vertical-align:middle}.cube .divContent{text-align:center;color:#fff;font-size:14px}.cube .left img{width:60px;height:60px;margin-top:20px}.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{padding:20px 0;transform:translateZ(100px)}@keyframes spin{from{transform:rotateY(0)}to{transform:rotateY(90deg)}}@keyframes spin2{from{transform:rotateY(90deg)}to{transform:rotateY(0)}}.cube:hover{animation:spin .5s ease;transform:rotateY(90deg)}