Todos los elementos se renderizan de forma plana en la página web. Sin embargo, podemos añadir algo de profundidad. perspective agrega un efecto de elementos en 3D. La sintaxis es la siguiente:

perspective: value in px;

Aplicamos perspective al elemento padre de un elemento que tiene alguna transformación. Así, el elemento se convierte en una especie de escena para el elemento transformado. Para visualizar el concepto, prestemos atención a la siguiente animación. El borde azul es el elemento padre con cierta perspectiva, y el elemento dentro tiene cierta rotación.

Practiquemos y añadamos perspectiva. Nuestra tarea es añadir perspective a los elementos padre (div con el nombre de clase box-border) que tienen hijos con alguna transformación.

Nota

La propiedad perspective define qué tan lejos está el objeto del usuario. Por lo tanto, un valor menor dará como resultado un efecto 3D más intenso que un valor mayor.