Todos os elementos são renderizados de forma plana na página web. No entanto, é possível adicionar profundidade. perspective adiciona um efeito de elementos 3D. A sintaxe é a seguinte:

perspective: value in px;

Aplicamos perspective ao elemento pai de um elemento que possui alguma transformação. Assim, o elemento pai se torna como um cenário para o elemento transformado. Para visualizar o conceito, observe a animação a seguir. A borda azul é o elemento pai com perspective aplicada, e o elemento interno possui uma rotação.

Vamos praticar e adicionar perspective. A tarefa é adicionar perspective aos elementos pais (div com o nome de classe box-border) que possuem filhos com alguma transformação.

Nota

A propriedade perspective define a distância do objeto em relação ao usuário. Portanto, um valor menor resultará em um efeito 3D mais intenso do que um valor maior.