body { width: 100vw; height: 100vh; } #clickMe { position: absolute; width: 200px; height: 200px; font-size: 40px; top: 50%; left: 50%; translate: -50% -50%; border-radius: 0; border: 10px solid #FF00FF; transform: translateZ(100px); } .scene { width: 200px; height: 200px; perspective: 600px; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); } #cube { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; display: none; } #cube > div { position: absolute; height: 200px; width: 200px; } #cube0 { transform: rotateY( 0deg) translateZ(100px); } #cube1 { transform: rotateY( 90deg) translateZ(100px); } #cube2 { transform: rotateY(180deg) translateZ(100px); } #cube3 { transform: rotateY(-90deg) translateZ(100px); } #cube4 { transform: rotateX( 90deg) translateZ(100px); } #cube5 { transform: rotateX(-90deg) translateZ(100px); } .face-image { box-sizing: border-box; width: 100%; height: 100%; object-fit: cover; border: 10px solid #FF00FF; opacity: 0.5; } @keyframes rotate3d { 0% { transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg); } 25% { transform: rotateY(90deg) rotateX(360deg) rotateZ(90deg); } 50% { transform: rotateY(180deg) rotateX(720deg) rotateZ(180deg); } 75% { transform: rotateY(270deg) rotateX(1080deg) rotateZ(270deg); } 100% { transform: rotateY(360deg) rotateX(1440deg) rotateZ(360deg); } } @keyframes scale { 0% { scale: 1 1.4 1; } 50% { scale: 1.4 1 1.4; } 100% { scale: 1 1.4 1; } }