Savybė transform-origin
Savybė transform-origin nustato tašką,
kurio atžvilgiu vyks elemento transformacijos,
nustatytos savybės transform.
Pagal nutylėjimą šis taškas yra elemento centras,
ir, pavyzdžiui, sukimasis vyks jo centro atžvilgiu.
Tačiau šį elgesį galima pakeisti
ir priversti elementą suktis savo krašto,
kampo arba apskritai taško, esančio už elemento ribų, atžvilgiu.
Sintaksė
selektorius {
transform-origin: X-ašis Y-ašis Z-ašis;
}
Reikšmės Y ir Z ašims nėra privalomos, jas galima praleisti (jos įgis numatytąsias reikšmes). Transformacijos taško poslinkis Z ašimi reikalingas 3D transformacijoms.
Reikšmės X ašiai
| Reikšmė | Aprašas |
|---|---|
| CSS vienetai | Reikšmė yra bet kokie dydžių vienetai, kurie nustato transformacijos centro poslinkį nuo kairiojo elemento krašto. Teigiama reikšmė transformacijos centrą perkelia į dešinę (į elemento vidų), o neigiama - į kairę (į išorę nuo elemento) kairiojo elemento krašto atžvilgiu. |
left |
Sukimosi taškas horizontalėje kairiajame elemento krašte. |
right |
Sukimosi taškas horizontalėje dešiniajame elemento krašte. |
center |
Sukimosi taškas horizontalėje elemento centre. |
Numatytoji reikšmė: center.
Reikšmės Y ašiai
| Reikšmė | Aprašas |
|---|---|
| CSS vienetai | Reikšmė yra bet kokie dydžių vienetai, kurie nustato transformacijos centro poslinkį nuo viršutinio elemento krašto. Teigiama reikšmė transformacijos centrą perkelia žemyn (į elemento vidų), o neigiama - aukštyn (į išorę nuo elemento) viršutinio elemento krašto atžvilgiu. |
top |
Sukimosi taškas vertikalėje viršutiniame elemento krašte. |
bottom |
Sukimosi taškas vertikalėje apatiniame elemento krašte. |
center |
Sukimosi taškas vertikalėje elemento centre. |
Numatytoji reikšmė: center.
Reikšmės Z ašiai
| Reikšmė | Aprašas |
|---|---|
| CSS vienetai | Reikšmė yra bet kokie dydžių vienetai, kurie nustato transformacijos centro poslinkį nuo elemento plokštumos. Teigiama reikšmė jį perkelia link mūsų (nuo ekrano plokštumos), o neigiama - nuo mūsų. |
Numatytoji reikšmė: 0px.
Pavyzdys
Dabar savybės transform-origin reikšmė nenustatyta ir blokas pasisuks savo centro atžvilgiu. Užveskite pelę ant bloko, kad pamatytumėte efektą:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: center center;
transform: rotate(30deg);
}
:
Pavyzdys
O dabar užvedus pelę blokas pasisuks viršutinio kairiojo kampo atžvilgiu:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 0px 0px;
transform: rotate(30deg);
}
:
Pavyzdys
O dabar užvedus pelę blokas pasisuks apatinio
dešiniojo kampo atžvilgiu. Tam reikia transformacijos
tašką nustatyti 100% į dešinę
ir 100% žemyn (galima būtų nustatyti
ir px, bet pakeitus elemento dydį
transformacijos taškas liktų toje pačioje vietoje,
todėl geriau daryti %):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 100%;
transform: rotate(30deg);
}
:
Pavyzdys
Pasukime bloką viršutinio dešiniojo kampo atžvilgiu:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 0%;
transform: rotate(30deg);
}
:
Pavyzdys
Pasukime bloką kairiosios pusės centro atžvilgiu.
Tam X ašiai nustatykime left (sukimosi
taškas bus kairėje), o Y ašiai - center
(sukimosi taškas bus centre vertikaliai):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left center;
transform: rotate(30deg);
}
:
Pavyzdys
Savybę galima nustatyti ne tik sukimuisi,
bet ir kitoms transformacijoms. Padidinkime
mastelį naudodami scale, nurodydami transformacijos
tašką kaip kairįjį apatinį kampą:
<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);
}
:
Pavyzdys
O dabar transformacijos tašku nurodykime viršutinį dešinįjį kampą:
<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);
}
:
Pavyzdys
Transformacijos tašką galima nustatyti ir už elemento ribų. Šiame pavyzdyje užvedus pelę ant raudono bloko juodas blokas atliks sukimąsi taško, esančio išorėje, atžvilgiu:
<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);
}
:
