Manuale di riferimento CSS

Regole @CSS (RULES)

Completo delle proprietà CSS

Proprietà position del CSS Proprietà perspective del CSS3

Metodo di utilizzo e esempio dell'attributo perspective-origin CSS3

L'attributo perspective-origin definisce l'asse X e Y su cui si basa l'elemento 3D. Questo attributo consente di modificare la posizione inferiore dell'elemento 3D. Quando si definisce l'attributo perspective-Origin, è un elemento figlio dell'elemento, la prospettiva, non l'elemento stesso.

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

Valore predefinito:	50P%
Applicabile a:	Elementi trasformabili
Ereditabile:	No
Animabile:	Sì.Riferimento: Proprietà animazione.
Versione:	Nuova funzionalità CSS3
Sintassi JavaScript:	oggetto.style.perspectiveOrigin="20%"

Sintassi dell'uso di perspective-origin

La sintassi di questo attributo è la seguente:

perspective-origin: [ x-position y-position ] | initial | inherit

Attenzione:Se viene specificato solo un valore per l'attributo perspective-origin, il secondo valore è considerato centrale, equivalente al valore del 50%.

Esempio di seguito dimostra come utilizzare l'attributo perspective-origin.

Esempio

.container{
　　　　width: 125px;
　　　　height: 125px;
　　　　perspective: 300px;
　　　　perspective-origin: 20% top;
　　　　border: 4px solid #a2b058;
　　　　background: #f0f5d8;
}
.transformed {
　　　　-webkit-transform: rotate3d(0, 1, 0, 60deg); /* Chrome, Safari, Opera */
　　　　transform: rotate3d(0, 1, 0, 60deg);　
}

Prova a vedere <br/>

Attenzione:Se almeno uno dei due valori non è una parola chiave, il primo valore rappresenta la posizione orizzontale (o offset) dell'origine della prospettiva, il secondo valore rappresenta la posizione verticale (o offset) dell'origine della prospettiva.

Valore dell'attributo

La tabella sottostante descrive i valori di questa proprietà.

Valore	Descrizione
x-axis	Rappresenta la posizione orizzontale (o offset) dell'origine della prospettiva. Può avere uno dei seguenti valori: percentage - Definisce l'offset in relazione alla larghezza dell'elemento. length - Definisce l'offset dell'unità di lunghezza utilizzata. left - uguale a 0% o larghezza zero. center - uguale a 50% della larghezza della scatola o metà. right - uguale a 100% o larghezza intera della scatola.
y-axis	Rappresenta la posizione verticale (o offset) dell'origine della prospettiva. Può avere uno dei seguenti valori: percentage - Definisce l'offset in relazione all'altezza dell'elemento. length - Definisce l'offset dell'unità di lunghezza utilizzata. top - uguale a 0% o altezza zero. center - uguale a 50% dell'altezza della scatola o metà. bottom - uguale a 100% o altezza intera della scatola.
initial	Imposta questa proprietà al suo valore predefinito.
inherit	Se specificato, l'elemento correlato utilizza il valore della proprietà perspective-origin dell'elemento padre.

Compatibilità del browser

Compatibilità del browser per la proprietà perspective-origin, 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ù

Si prega di consultare la seguente guida:Trasformazioni 3D del CSS3.

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

Proprietà position del CSS Proprietà perspective del CSS3