Perspective with Animations
Perspective is a cool CSS property to use to demonstrate depth.
To add perspective, you need to add the perspective
CSS property to a parent class. I’ve done this in an infinite animation.
Container Perspective
.container {
animation: perspectiveAnimation 2s infinite ease-in-out;
}
@keyframes perspectiveAnimation {
0% {
perspective: 10px;
}
50% {
perspective: 40px;
}
100% {
perspective: 10px;
}
}
After that, you need to add an appropriate transform to the child elements. Below are some good transforms that you can use.
Child Transform
.child {
transform: rotateX(10deg);
}
Child Transform
.child {
transform: rotateY(10deg);
}
Perspective Origin
By default, the vanishing point is in the middle. You can change this with the perspective-origin
CSS property.
Perspective Origin
.container {
perspective-origin: 50% 50%;
}
HTML
CSS
Output