⌘K

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ė

cssselektorius {
  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ą: 

html<div id="elem">lorem ipsum</div>
css#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: 

html<div id="elem">lorem ipsum</div>
css#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 %): 

html<div id="elem">lorem ipsum</div>
css#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: 

html<div id="elem">lorem ipsum</div>
css#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): 

html<div id="elem">lorem ipsum</div>
css#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ą: 

html<div id="elem">lorem ipsum</div>
css#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ą: 

html<div id="elem">lorem ipsum</div>
css#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: 

html<div id="hover"></div>
<div id="elem"></div>
css#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);
}

Результат:

BackTransform savybėNextFunkcija rotate