Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Flip Out X Animation Effect with CSS
The CSS Flip Out X animation effect creates a 3D flipping motion where an element rotates around its horizontal (X) axis and fades out simultaneously. This animation is commonly used for exit transitions and interactive UI elements.
Syntax
@keyframes flipOutX {
0% {
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
100% {
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
}
.element {
animation: flipOutX 1s ease-in-out;
}
Example
The following example demonstrates the flip out X animation effect applied to a colored box −
<!DOCTYPE html>
<html>
<head>
<style>
.animated-box {
width: 200px;
height: 150px;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
border-radius: 10px;
margin: 50px auto;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 18px;
font-weight: bold;
animation: flipOutX 2s ease-in-out;
animation-fill-mode: forwards;
}
@keyframes flipOutX {
0% {
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
100% {
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
}
.replay-btn {
display: block;
margin: 20px auto;
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
.replay-btn:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="animated-box">Flip Out X</div>
<button class="replay-btn" onclick="location.reload()">Replay Animation</button>
</body>
</html>
A gradient-colored box with "Flip Out X" text appears and then flips horizontally while fading out. The animation creates a 3D rotating effect around the X-axis, making the element disappear with a realistic flip motion.
Key Properties
| Property | Value | Description |
|---|---|---|
perspective() |
400px | Creates depth for 3D transformation |
rotateX() |
0deg to 90deg | Rotates element around horizontal axis |
opacity |
1 to 0 | Fades element from visible to invisible |
animation-fill-mode |
forwards | Retains final animation state |
Conclusion
The Flip Out X animation combines 3D rotation and opacity changes to create an engaging exit effect. The perspective property adds depth, while rotateX() provides the horizontal flipping motion that makes elements disappear naturally.
Updated on: 2026-03-15T11:50:01+05:30
185 Views
Advertisements