Instant CSS
Tools
Templates
Components
Learn
More
Flip In X
Animation
3D flip entrance along the X axis.
Reset to Default
HTML
Copy HTML
<div class="flip-card">Flip In</div>
CSS
Copy CSS
.flip-card { padding: 20px 28px; background: white; color: #0f172a; border: 1px solid #e2e8f0; border-radius: 12px; font-family: sans-serif; font-weight: 700; box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08); backface-visibility: visible; animation: flipInX 0.85s ease-out both; } @keyframes flipInX { from { opacity: 0; transform: perspective(400px) rotate3d(1, 0, 0, 90deg); animation-timing-function: ease-in; } 40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); animation-timing-function: ease-in; } 60% { opacity: 1; transform: perspective(400px) rotate3d(1, 0, 0, 10deg); } 80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { transform: perspective(400px); } }
Live Preview
Flip In
Tip:
Edit the HTML or CSS on the left to instantly see changes in the preview.