<div class="cube-container spin"> <div class="cube"> <figure class="side front">1</figure> <figure class="side back">2</figure> <figure class="side left">3</figure> <figure class="side right">4</figure> <figure class="side top">5</figure> <figure class="side bottom">6</figure> </div> </div>
body { color: #fff; font: 600 24px/24px "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif; margin: 12px 45px; } .spin { cursor: pointer; transform-style: preserve-3d; } .spin:hover { animation: spin 5s linear infinite; } @keyframes spin { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .cube-container { height: 200px; -webkit-perspective: 300; perspective: 300; position: relative; width: 200px; } .cube { height: 100%; position: absolute; transform: translateZ(-100px); transform-style: preserve-3d; width: 100%; } .side { background: rgba(45, 179, 74, .3); border: 2px solid #2db34a; height: 196px; line-height: 196px; position: absolute; text-align: center; width: 196px; } .front { transform: translateZ(100px); } .back { transform: rotateX(180deg) translateZ(100px); } .left { transform: rotateY(-90deg) translateZ(100px); } .right { transform: rotateY(90deg) translateZ(100px); } .top { transform: rotateX(90deg) translateZ(100px); } .bottom { transform: rotateX(-90deg) translateZ(100px); }