Tutti gli elementi vengono visualizzati in modo piatto sulla pagina web. Tuttavia, è possibile aggiungere profondità. perspective aggiunge un effetto di elementi 3D. La sintassi è la seguente:

perspective: value in px;

Si applica la prospettiva al genitore di un elemento che ha una trasformazione. In questo modo, l'elemento diventa come una scena per l'elemento trasformato. Per visualizzare il concetto, osservare la seguente animazione. Il bordo blu rappresenta l'elemento genitore con una certa prospettiva, mentre l'elemento interno presenta una rotazione.

Procedere con un esercizio pratico e aggiungere la prospettiva. L'obiettivo è aggiungere la prospettiva agli elementi genitori (div con il nome classe box-border) che contengono figli con una trasformazione.

Nota

La proprietà perspective definisce quanto l'oggetto sia distante dall'utente. Un valore più basso produrrà un effetto 3D più intenso rispetto a un valore più alto.