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