Proprietà prospettica CSS
Esempio
Dai una prospettiva a un elemento posizionato in 3D:
#div1
{
perspective: 100px;
}
Altri esempi "Provalo da solo" di seguito.
Definizione e utilizzo
La perspective
proprietà viene utilizzata per dare una prospettiva a un elemento posizionato in 3D.
La perspective
proprietà definisce la distanza dell'oggetto dall'utente. Quindi, un valore più basso risulterà in un effetto 3D più intenso rispetto a un valore più alto.
Quando si definisce la perspective
proprietà per un elemento, sono gli elementi CHILD che ottengono la vista prospettica, NON l'elemento stesso.
Suggerimento: guarda anche la proprietà di origine prospettiva , che definisce in quale posizione l'utente sta guardando l'oggetto 3D.
Per comprendere meglio la proprietà della prospettiva, visualizzare una demo .
Valore di default: | nessuno |
---|---|
Ereditato: | no |
Animabile: | sì. Leggi su animabile |
Versione: | CSS3 |
sintassi JavaScript: | oggetto .style.perspective="50px" |
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 | 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: length|none;
Valori di proprietà
Property Value | Description |
---|---|
length | How far the element is placed from the view |
none | Default value. Same as 0. The perspective is not set |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Altri esempi
Esempio
Crea un cubo e imposta diverse prospettive:
.ex1 {
perspective: 800px;
}
.ex2 {
perspective: 150px;
}
Pagine correlate
Tutorial CSS: Trasformazioni 3D CSS
Riferimento HTML DOM: proprietà prospettica