CSS perspektief Eiendom
Voorbeeld
Gee 'n 3D-geposisioneerde element 'n bietjie perspektief:
#div1
{
perspective: 100px;
}
Meer "Probeer dit self" voorbeelde hieronder.
Definisie en gebruik
Die perspective
eiendom word gebruik om 'n 3D-geposisioneerde element 'n mate van perspektief te gee.
Die perspective
eienskap definieer hoe ver die voorwerp van die gebruiker af is. Dus, 'n laer waarde sal lei tot 'n meer intensiewe 3D-effek as 'n hoër waarde.
Wanneer die perspective
eienskap vir 'n element gedefinieer word, is dit die KIND-elemente wat die perspektiefaansig kry, NIE die element self nie.
Wenk: Kyk ook na die perspektief-oorsprong- eienskap, wat definieer op watter posisie die gebruiker na die 3D-voorwerp kyk.
Bekyk 'n demonstrasie om die perspektief-eiendom beter te verstaan .
Standaard waarde: | geen |
---|---|
Geërf: | geen |
Animateerbaar: | ja. Lees oor animeerbaar |
Weergawe: | CSS3 |
JavaScript-sintaksis: | voorwerp .style.perspective="50px" |
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die eiendom ten volle ondersteun.
Nommers gevolg deur -webkit- of -moz- spesifiseer die eerste weergawe wat met 'n voorvoegsel gewerk het.
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- |
CSS-sintaksis
perspective: length|none;
Eiendomswaardes
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 |
Meer voorbeelde
Voorbeeld
Skep 'n kubus en stel verskillende perspektiewe:
.ex1 {
perspective: 800px;
}
.ex2 {
perspective: 150px;
}
Verwante bladsye
CSS-tutoriaal: CSS 3D Transforms
HTML DOM verwysing: perspektief eiendom