Instant CSS
Tools
Templates
Components
Learn
More
Rotate 3D
Animation
Continuous 3D rotation around the Y axis.
Reset to Default
HTML
Copy HTML
<div class="rot-3d">3D</div>
CSS
Copy CSS
.rot-3d { width: 90px; height: 90px; background: linear-gradient(135deg, #2563eb, #4f46e5); color: white; display: flex; align-items: center; justify-content: center; border-radius: 14px; font-family: sans-serif; font-weight: 800; font-size: 24px; animation: rotate3d 3s linear infinite; transform-style: preserve-3d; } @keyframes rotate3d { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } }
Live Preview
3D
Tip:
Edit the HTML or CSS on the left to instantly see changes in the preview.