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
Perform Animation on CSS perspective property
The CSS perspective property defines how far an element is placed from the view, giving it a 3D effect. When animated, it creates dynamic depth changes that make 3D transformations more or less pronounced over time.
Syntax
selector {
perspective: value;
animation: animation-name duration timing-function iteration-count;
}
@keyframes animation-name {
from { perspective: initial-value; }
to { perspective: final-value; }
}
Example
The following example animates the perspective property to create a dynamic 3D effect on a rotated child element −
<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {
position: relative;
margin: 50px auto;
height: 250px;
width: 350px;
padding: 10px;
border: 2px solid orange;
animation: perspectiveAnim 3s infinite alternate;
perspective: 200px;
}
@keyframes perspectiveAnim {
0% {
perspective: 200px;
}
50% {
perspective: 100px;
}
100% {
perspective: 300px;
}
}
#demo2 {
padding: 40px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotateX(45deg);
border: 2px solid black;
background-color: orange;
color: white;
text-align: center;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="demo1">
Parent Container
<div id="demo2">
3D Rotated Element
</div>
</div>
</body>
</html>
An orange bordered container with a 3D rotated child element inside. The child element appears to move closer and farther away as the perspective value changes from 200px to 100px to 300px, creating a dynamic depth effect that repeats infinitely.
How It Works
The animation works by changing the perspective value over time:
- Lower perspective values (100px) − Create a more dramatic 3D effect, making the element appear closer
- Higher perspective values (300px) − Create a subtler 3D effect, making the element appear farther away
- The rotateX transform on the child element makes the perspective changes visible
Conclusion
Animating the CSS perspective property creates engaging 3D depth effects. Combined with 3D transforms on child elements, it produces smooth transitions that enhance visual appeal and user experience.
Updated on: 2026-03-15T13:36:29+05:30
201 Views
Advertisements