Proprietà CSS di origine prospettica
Esempio
Definire da quale posizione l'utente sta guardando l'elemento posizionato in 3D:
#div1
{
perspective: 100px;
perspective-origin: left;
}
Definizione e utilizzo
La perspective-origin
proprietà definisce da quale posizione l'utente guarda l'elemento posizionato in 3D.
Quando si definisce la perspective-origin
proprietà per un elemento, sono gli elementi CHILD che otterranno l'effetto, NON l'elemento stesso.
Nota: questa proprietà deve essere utilizzata insieme alla proprietà prospettiva !
Per comprendere meglio la proprietà dell'origine prospettiva, visualizzare una demo .
Valore di default: | 50% 50% |
---|---|
Ereditato: | no |
Animabile: | sì. Leggi su animabile |
Versione: | CSS3 |
sintassi JavaScript: | oggetto .style.perspectiveOrigin="10px 50%" |
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente la proprietà.
I numeri seguiti da -webkit- o -moz- specificano la prima versione che ha funzionato con un prefisso.
Property | |||||
---|---|---|---|---|---|
perspective-origin | 36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
9.0 4.0.3 -webkit- |
23.0 15.0 -webkit- |
Sintassi CSS
perspective-origin: x-axis y-axis|initial|inherit;
Valori di proprietà
Property Value | Description |
---|---|
x-axis | Defining where the view is placed at the x-axis Possible values:
Default value: 50% |
y-axis | Defining where the view is placed at the y-axis Possible values:
Default value: 50% |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Pagine correlate
Tutorial CSS: Trasformazioni 3D CSS
Riferimento HTML DOM: proprietà prospectOrigin