HTML
CSS
JavaScript
<div class='perspective-container'><div class='cube'></div></div>
.perspective-container { width: 200px; height: 200px; perspective: 500px; margin: 50px auto; } .cube { width: 100px; height: 100px; background: linear-gradient(45deg, #f06, #4a90e2); transform: rotateY(45deg) translateZ(50px); transform-style: preserve-3d; animation: rotate 5s infinite linear; } @keyframes rotate { from { transform: rotateY(0) translateZ(50px); } to { transform: rotateY(360deg) translateZ(50px); } }
// No JavaScript required for this demo