Transformuoti kilmę - CSS-gudrybės

transform-originTurtas yra naudojamas kartu su CSS transformacijas, leidžia jums pakeisti kilmės transformacijos taškas.

.box ( transform: rotate(360deg); transform-origin: top left; )

Kaip nurodyta pirmiau, transform-originypatybė gali užimti iki dviejų tarpų atskirtų raktinių žodžių arba ilgio reikšmių 2D transformacijai ir iki trijų reikšmių 3D transformacijai.

Naudojant aukščiau esantį kodą lauke 200 x 200 taškų, o transformacija, pritaikyta perėjimui naudojant paspaudimo įvykį, elgtųsi taip:

Patikrinkite šį rašiklį!

Pagal numatytuosius nustatymus transformacijos kilmė yra „50% 50%“, kuri yra tiksliai bet kurio nurodyto elemento centre. Keičiant kilmę į „viršuje kairėje“ (kaip aukščiau esančioje demonstracinėje versijoje), elementas naudoja viršutinį kairįjį elemento kampą kaip sukimosi tašką.

Vertybės gali būti ilgiai, procentais ar raktažodžius top, left, right, bottom, ir center.

Pirmoji reikšmė yra horizontali padėtis, antroji - vertikali, o trečioji vertė rodo padėtį Z ašyje. Trečioji reikšmė veiks tik tuo atveju, jei naudojate 3D transformacijas, ir ji negali būti procentinė.

Peržiūrėkite „Shaw“ (@shshaw) „Pen“ transformacijos kilmės iliustraciją „CodePen“.