CSS transformasie-oorsprong Eiendom
Voorbeeld
Stel 'n geroteerde element se basisplasing:
div
{
transform: rotate(45deg);
transform-origin: 20% 40%;
}
Definisie en gebruik
Die transform-origin
eiendom laat jou toe om die posisie van getransformeerde elemente te verander.
2D-transformasies kan die x- en y-as van 'n element verander. 3D-transformasies kan ook die z-as van 'n element verander.
Bekyk 'n demonstrasietransform-origin
om die eiendom
beter te verstaan .
Let wel: Hierdie eiendom moet saam met die transformasie- eiendom gebruik word.
Wenk: Bekyk 'n demonstrasie om hierdie eienskap vir 3D-transformasies beter te verstaan .
Standaard waarde: | 50% 50% 0 |
---|---|
Geërf: | geen |
Animateerbaar: | ja. Lees oor animeerbaar |
Weergawe: | CSS3 |
JavaScript-sintaksis: | voorwerp .style.transformOrigin="0 0" |
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die eiendom ten volle ondersteun.
Nommers gevolg deur -webkit-, -moz-, of -o- spesifiseer die eerste weergawe wat met 'n voorvoegsel gewerk het.
Property | |||||
---|---|---|---|---|---|
transform-origin (two-value syntax) |
36.0 4.0 -webkit- |
10.0 9.0 -ms- |
16.0 3.5 -moz- |
9.0 3.2 -webkit- |
23.0 15.0 -webkit- 10.5 -o- |
transform-origin (three-value syntax) |
36.0 12.0 -webkit- |
10.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
23.0 15.0 -webkit- |
CSS-sintaksis
transform-origin: x-axis y-axis z-axis|initial|inherit;
Eiendomswaardes
Property Value | Description |
---|---|
x-axis | Defines where the view is placed at the x-axis. Possible values:
|
y-axis | Defines where the view is placed at the y-axis. Possible values:
|
z-axis | Defines where the view is placed at the z-axis (for 3D transformations). Possible values:
|
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Verwante bladsye
CSS-tutoriaal: CSS 2D Transforms
CSS-tutoriaal: CSS 3D Transforms
HTML DOM verwysing: transformOrigin eiendom