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;
    }
}

Min Value

Max Value

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);
}

Rotate X

Child Transform

.child {
    transform: rotateY(10deg);
}

Rotate X

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%;
}