Perspectiva - CSS-Tricks | CSS Almanac 2025

A perspectivepropriedade CSS dá a um elemento um espaço 3D ao afetar a distância entre o plano Z e o usuário.

A força do efeito é determinada pelo valor. Quanto menor o valor, mais próximo você se aproxima do plano Z e mais impressionante é o efeito visual. Quanto maior o valor, mais sutil será o efeito.

Importante: Observe que a propriedade da perspectiva não afeta a forma como o elemento é renderizado; simplesmente habilita um espaço 3D para elementos filhos. Esta é a principal diferença entre a transform: perspective()função e a perspectivepropriedade. O primeiro fornece profundidade de elemento, enquanto o último cria um espaço 3D compartilhado por todos os seus filhos transformados.

/** * Syntax * perspective: none |  */ .parent ( perspective: 1000px; ) .child ( transform: rotateY(50deg); )

Confira esta Caneta!

A demonstração acima tem como objetivo mostrar a diferença entre a função e a propriedade.

No lado esquerdo, você pode ver a propriedade aplicada ao pai ( perspective: 50em) dos elementos transformados ( transform: rotateY(50deg)).
No lado direito, a perspectiva é aplicada a partir da transformação diretamente nos filhos ( transform: perspective(50em) rotateY(50deg)).

Isso mostra como definir a perspectiva do pai faz com que todos os filhos compartilhem o mesmo espaço 3D e, portanto, o mesmo ponto de fuga.

Vamos tentar algo ainda mais legal: um cubo com transformações 3D e perspectiva.

Confira esta Caneta!

Veja como o cubo é feito: ele conta com dois invólucros aninhados (um para dar perspectiva ao cubo e outro para envolver todos os lados) e 6 elementos para fazer os lados. Cada elemento recebe sua própria transformação, que mistura translação e rotação no espaço 3D (por exemplo transform: rotateX(90deg) translateZ(1em)).

Vamos terminar com uma demonstração do que poderia ser a base de um design do mundo real: uma parede de fotografias + legendas usando perspectiva e transformação.