Funzione CSS perspective()

Definizione e uso

CSS prospettiva() definisce la distanza dell'utente dal piano z=0.

prospettiva() La funzione transform nelle proprietà.

esempio

usando prospettiva() Aggiungi un po' di effetto prospettiva ai due cubi:

.cube1 {
  dimensione del carattere: 4em;
  larghezza: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: prospettiva(5cm) rotateX(-15grado) rotateY(30grado);
}
.cube2 {
  dimensione del carattere: 4em;
  larghezza: 2em;
  margin: 1.5em auto;
  transform-style: preserve-3d;
  transform: prospettiva(10cm) rotateX(-15grado) rotateY(30grado);
}

Prova tu stesso

Sintassi CSS

prospettiva(length|none)
Valore Descrizione
length Obbligatorio. Specifica la distanza dell'utente dal piano z=0. none indica che non viene eseguita alcuna trasformazione.

Dettagli tecnici

Versione: Modulo Transforms CSS Livello 2

Supporto del browser

I numeri nella tabella rappresentano la versione del browser che supporta completamente la funzione.

Chrome Edge Firefox Safari Opera
prospettiva()
12 12 10 4 15
prospettiva(none)
97 97 93 15.4 83

Pagine correlate

Guida:Trasformazione 3D CSS

Riferimento:Proprietà CSS transform

Riferimento:Funzione CSS rotate()

Riferimento:Funzione CSS rotate3d()

Riferimento:Funzione CSS rotateX()

Riferimento:Funzione CSS rotateY()

Riferimento:Funzione CSS rotateZ()