transform-origin Eienskap
Die transform-origin eienskap spesifiseer die punt
waarvolgens transformasies van die element,
gespesifiseer deur die transform eienskap,
sal plaasvind.
Standaard is hierdie punt die middel van die element,
en byvoorbeeld sal rotasie om sy middel plaasvind.
Hierdie gedrag kan egter verander word
om die element te laat roteer relatief tot
sy sy, hoek of selfs 'n punt buite die element.
Sintaksis
selektor {
transform-origin: X-as Y-as Z-as;
}
Die waardes vir die Y- en Z-as is nie verpligtend nie, jy kan dit weglaat (hulle sal die verstekwaardes aanneem). Verskuiwing van die punt op die Z-as is nodig vir 3D-transformasies.
Waardes vir die X-as
| Waarde | Beskrywing |
|---|---|
| CSS eenhede | Enige eenhede vir groottes kan as waarde dien, wat die afstand van die transformasiesentrum vanaf die linkerrand van die element spesifiseer. 'n Positiewe waarde skuif die transformasiesentrum na regs (na binne die element), en 'n negatiewe waarde na links (na buite die element) relatief tot die linkerrand van die element. |
left |
Rotasiepunt horisontaal op die linkerrand van die element. |
right |
Rotasiepunt horisontaal op die regterrand van die element. |
center |
Rotasiepunt horisontaal in die middel van die element. |
Verstekwaarde: center.
Waardes vir die Y-as
| Waarde | Beskrywing |
|---|---|
| CSS eenhede | Enige eenhede vir groottes kan as waarde dien, wat die afstand van die transformasiesentrum vanaf die boonste rand van die element spesifiseer. 'n Positiewe waarde skuif die transformasiesentrum afwaarts (na binne die element), en 'n negatiewe waarde opwaarts (buite die element) relatief tot die boonste rand van die element. |
top |
Rotasiepunt vertikaal op die boonste rand van die element. |
bottom |
Rotasiepunt vertikaal op die onderste rand van die element. |
center |
Rotasiepunt vertikaal in die middel van die element. |
Verstekwaarde: center.
Waardes vir die Z-as
| Waarde | Beskrywing |
|---|---|
| CSS eenhede | Enige eenhede vir groottes kan as waarde dien, wat die afstand van die transformasiesentrum vanaf die vlak van die element spesifiseer. 'n Positiewe waarde skuif dit na ons toe (vanaf die skermvlak af), en 'n negatiewe waarde van ons af. |
Verstekwaarde: 0px.
Voorbeeld
Tans is die waarde van die transform-origin eienskap nie gespesifiseer nie en die blok sal roteer relatief tot sy middel. Beweeg jou muis oor die blok om die effek te sien:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: center center;
transform: rotate(30deg);
}
:
Voorbeeld
En nou sal die blok, wanneer daaroor gehover word, roteer relatief tot die boonste linkerhoek:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 0px 0px;
transform: rotate(30deg);
}
:
Voorbeeld
En nou sal die blok, wanneer daaroor gehover word, roteer relatief tot
die regter onderhoek. Om dit te doen moet die
transformsiepunt 100% na regs
en 100% af geskuif word (jy kon
ook px spesifiseer, maar met veranderinge in die element se grootte
sou die transformsiepunt op sy plek gebly het,
dus is % beter):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 100%;
transform: rotate(30deg);
}
:
Voorbeeld
Laat ons die blok roteer relatief tot die regter boonste hoek:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 0%;
transform: rotate(30deg);
}
:
Voorbeeld
Laat ons die blok roteer relatief tot die middel van die linkerkant.
Om dit te doen, spesifiseer vir die X-as left (die
rotasiepunt sal links wees), en vir die Y-as - center
(die rotasiepunt sal in die middel vertikaal wees):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left center;
transform: rotate(30deg);
}
:
Voorbeeld
Die eienskap kan nie net vir rotasie gespesifiseer word nie,
maar ook vir ander transformasies. Kom ons vergroot
die skaal met scale, deur die
transformsiepunt as die linker onderhoek te spesifiseer:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left bottom;
transform: scale(1.5);
}
:
Voorbeeld
En nou spesifiseer ons die regter boonste hoek as die transformsiepunt:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: right top;
transform: scale(1.5);
}
:
Voorbeeld
Die transformsiepunt kan ook buite die element gespesifiseer word. In die volgende voorbeeld, wanneer die muis oor die rooi blok beweeg word, sal die swart blok 'n rotasie uitvoer relatief tot 'n punt wat buite homself geleë is:
<div id="hover"></div>
<div id="elem"></div>
#hover {
border: 1px solid red;
width: 50px;
height: 50px;
}
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
transition: transform 1s;
transform-origin: -100px -100px;
}
#hover:hover + #elem {
transform: rotate(30deg);
}
:
