<div class="container"> <div class="stage"> <div class="cube"> <div class="face front">front</div> <div class="face back">back</div> <div class="face left">left</div> <div class="face right">right</div> <div class="face top">top</div> <div class="face bottom">bottom</div> </div> </div> </div>
/* Common properties for all faces: position absolute and size */ .face { position: absolute; width: var(--S); height: var(--S); } .cube { transform-style: preserve-3d; /* transform-origin: center center; */ width: var(--S); height: var(--S); } .stage { transform: translateZ(calc(var(--S) / -2)); transform-style: preserve-3d; } .container { /* Set the size of the sides of the cube here */ --S: 400px; outline: solid 1px red; width: var(--S); height: var(--S); margin: 50px auto 0 auto; /* Set perspective */ perspective: 800px; /* background-color: rgba(0, 0, 0, 0.2); overflow: hidden; */ } .face.front { transform: translateZ(calc(var(--S) / 2)); } .face.back { transform: rotateY(180deg) translateZ(calc(var(--S) / 2)); } .face.left { transform: rotateY(-90deg) translateZ(calc(var(--S) / 2)); } .face.right { transform: rotateY(90deg) translateZ(calc(var(--S) / 2)); } .face.top { transform: rotateX(90deg) translateZ(calc(var(--S) / 2)); } .face.bottom { transform: rotateX(-90deg) translateZ(calc(var(--S) / 2)); } /* Colors and text position */ .face { line-height: var(--S); text-align: center; color: transparent; font-size: calc(var(--S) / 4); } /* .front { background-color: rgba(255, 0, 0, 0.5); } .back { background-color: rgba(0, 255, 0, 0.5); } .left { background-color: rgba(0, 0, 255, 0.5); } .right { background-color: rgba(0, 255, 255, 0.5); } .top { background-color: rgba(255, 0, 255, 0.5); } .bottom { background-color: rgba(255, 255, 0, 0.5); } */ /* Some more spice: */ .face.front { background-image: url('https://www.mobzystems.com/images/mobzystems/MOBZync/mobzync.png'); } .face.back { background-image: url('https://www.mobzystems.com/images/mobzystems/MOBZRuler/MOBZRuler.png'); } .face.left { background-image: url('https://www.mobzystems.com/images/mobzystems/MOBZPing/MOBZPing.png'); } .face.right { background-image: url('https://www.mobzystems.com/images/mobzystems/QuickCode/QuickCode2008.png'); } .face.top { background-image: url('https://www.mobzystems.com/images/mobzystems/RegFind/RegFind.png'); } .face.bottom { background-image: url('https://www.mobzystems.com/images/mobzystems/MOBZcript/MOBZcript.png'); } /* Show the "base plane" */ /* .cube { outline: solid 1px black; } */ /* Define an animation on the cube */ .cube { animation: 12s ease infinite alternate spin; } @keyframes spin { from { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } 50% { transform: rotateX(0deg) rotateY(360deg) rotateZ(0deg); } to { transform: rotateX(360deg) rotateY(360deg) rotateZ(0deg); } }