.cube{transition:all .3s ease-in-out;transform-style:preserve-3d;transform:rotateY(-45deg) rotateX(-15deg) rotate(15deg)}.cube,.cube-side{position:absolute}.cube-side{display:flex;justify-content:center;align-items:center;border:1px solid #6e6e6e}.cube-front{transform:rotateY(0deg) translateZ(30px);background-color:#c8c8c8}.cube-back{transform:rotateY(180deg) translateZ(30px)}.cube-right{transform:rotateY(90deg) translateZ(30px);background-color:#a4a4a4}.cube-left{transform:rotateY(-90deg) translateZ(30px)}.cube-top{transform:rotateX(90deg) translateZ(30px);background-color:#e7e7e7}.cube-bottom{transform:rotateX(-90deg) translateZ(30px)}.cube-back,.cube-bottom,.cube-front,.cube-left,.cube-right,.cube-top{transition:all .5s ease-in-out}