Manuale di riferimento CSS

Regole CSS (@RULES)

Manuale completo delle proprietà CSS

Proprietà perspective-origin CSS3 Proprietà page-break-inside CSS

Metodi di utilizzo e esempi dell'attributo CSS3 perspective

L'attributo CSS perspective definisce la prospettiva di visualizzazione di tutti i sottoelementi dell'oggetto. Di solito determina la distanza tra il piano Z = 0 e il visore, permettendo agli elementi posizionati in 3D di avere una sensazione di profondità. Gli elementi 3D con Z > 0 diventano più grandi, mentre quelli con Z < 0 diventano più piccoli.

La tabella sottostante fornisce la descrizione dell'uso di questo attributo e la cronologia delle versioni, nonché la sintassi dell'uso di questo attributo nei script JavaScript.

Valore predefinito:	none
Applicabile a:	Elementi trasformabili
Ereditarietà:	Nessuno
Animazione disponibile:	Sì.Riferiti a Attributi animazione.
Versione:	Nuova funzionalità del CSS3
Sintassi JavaScript:	object.style.perspective=500

Sintassi dell'uso di Perspective

La sintassi di questo attributo è la seguente:

perspective:　length　|　none　|　initial　|　inherit

Ecco un esempio che dimostra come utilizzare la proprietà perspective.

Esempio

.container　{
　　　　width:　125px;
　　　　height:　125px;
　　　　perspective:　500px;
　　　　border:　4px　solid　#e5a043;
　　　　background:　#fff2dd;
}
.transformed　{
　　　　-webkit-transform:　translate3d(25px,　25px,　50px);　/*　Chrome,　Safari,　Opera　*/
　　　　transform:　translate3d(25px,　25px,　50px);　
}

Prova a vedere‹/›

Valore dell'attributo

La tabella sottostante descrive i valori di questa proprietà.

Valore	Descrizione
length	Indica la lunghezza della profondità della prospettiva. Se è 0 o negativo, non applicare la trasformazione di prospettiva.
none	Non applicare la trasformazione di prospettiva. Questo è il valore predefinito.
initial	Imposta questa proprietà al suo valore predefinito.
inherit	Se specificato, l'elemento correlato utilizza il valore della proprietà perspective del suo elemento padre.

Compatibilità del browser

La compatibilità del browser per la proprietà perspective, i numeri nella tabella sottostante rappresentano la versione minima del browser che supporta questa proprietà; tutti i browser mainstream supportano questa proprietà.

	Firefox 10+ ^-moz-, 16 + Google Chrome 12+ ^-webkit-, 36+ Internet Explorer 10+ Apple Safari 4.0.3+ ^-webkit- Opera 15+ ^-webkit-, 23+

Leggi di più

Ecco i tutorial di riferimento:Trasformazioni 3D del CSS3.

Proprietà correlate:perspective-origin,backface-visibility,transform,transform-origin,transform-style.

Proprietà perspective-origin CSS3 Proprietà page-break-inside CSS