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 Animation Effect with CSS
The CSS flip animation effect creates a 3D rotation that makes an element appear to turn over or flip around its Y-axis. This effect uses CSS transforms and keyframes to create smooth, eye-catching animations.
Syntax
selector {
animation: flip duration timing-function;
transform: perspective(distance) rotateY(angle);
}
Example
The following example demonstrates a flip animation effect that rotates an element 360 degrees with perspective −
<!DOCTYPE html>
<html>
<head>
<style>
.flip-container {
width: 200px;
height: 200px;
margin: 50px auto;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-family: Arial, sans-serif;
font-size: 18px;
font-weight: bold;
cursor: pointer;
animation: flip 2s ease-in-out infinite;
}
@keyframes flip {
0% {
transform: perspective(400px) rotateY(0);
}
40% {
transform: perspective(400px) translateZ(150px) rotateY(170deg);
}
50% {
transform: perspective(400px) translateZ(150px) rotateY(190deg);
}
80% {
transform: perspective(400px) rotateY(360deg) scale(0.95);
}
100% {
transform: perspective(400px) scale(1);
}
}
.flip-container:hover {
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="flip-container">
Flip Effect
</div>
<p style="text-align: center; color: #666;">Hover to pause animation</p>
</body>
</html>
A colorful gradient box with "Flip Effect" text continuously flips in 3D space, rotating 360 degrees around its Y-axis. The animation pauses when you hover over it.
Key Properties
| Property | Description |
|---|---|
perspective() |
Sets the distance between the viewer and the element for 3D effect |
rotateY() |
Rotates the element around the Y-axis (vertical) |
translateZ() |
Moves the element forward/backward in 3D space |
scale() |
Resizes the element during animation |
Conclusion
The flip animation effect combines 3D transforms with keyframe animations to create engaging visual effects. Use perspective() for depth and rotateY() for the flipping motion to achieve realistic 3D rotations.
Updated on: 2026-03-15T11:48:45+05:30
258 Views
Advertisements