Esempio
Impostare il posizionamento di base di un elemento 3D:
div
{
-webkit-perspective: 150px; /* Chrome, Safari, Opera */
-webkit-perspective-origin: 10% 10%; /* Chrome, Safari, Opera */
perspective: 150px;
perspective-origin: 10% 10%;
}
Prova tu stesso " Definizione e utilizzo
La proprietà prospettiva origine definisce dove un elemento 3D si basa nelle direzioni x ed y. Questa proprietà permette di modificare la posizione inferiore di elementi 3D.
Quando si definisce la proprietà prospettiva di origine per un elemento, è gli elementi figli che sono posizionati, non l'elemento stesso.
Note: Questa proprietà deve essere utilizzata insieme alla prospettiva di proprietà, e riguarda solo 3D elementi trasformato!
Per capire meglio la proprietà prospettiva origine, visualizzare una demo .
| Valore di default: | 50% 50% |
|---|---|
| Inherited: | no |
| animatable: | yes. Read about animatable Try it |
| Versione: | CSS3 |
| sintassi JavaScript: | object .style.perspectiveOrigin="10px 50%" Try it |
Supporto per il browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente la proprietà.
Numeri seguiti da -webkit- o -moz- specificano la prima versione che ha lavorato con un prefisso.
| Proprietà | |||||
|---|---|---|---|---|---|
| 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- |
CSS Sintassi
perspective-origin:x-axis y-axis|initial|inherit;I valori delle proprietà
| Costo dell'immobile | Descrizione |
|---|---|
| x-axis | Definire dove la vista è posto l'asse x Valori possibili:
Valore di default: 50% |
| y-axis | Definire dove la vista è posto l'asse y Valori possibili:
Valore di default: 50% |
| iniziale | Consente di impostare questa proprietà al suo valore di default. Leggi iniziale |
| ereditare | Eredita questo immobile dal suo elemento genitore. Leggi su erediterà |
Pagine correlate
Tutorial CSS: CSS 3D Transforms
Di riferimento HTML DOM: perspectiveOrigin property