Transformiraj-izvor - CSS-triki

transform-originLastnost se uporablja v povezavi s CSS transformacij, kar omogoča, da spremenite točko izvora transformacijskem.

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

Kot je navedeno zgoraj, lahko transform-originlastnost traja do dve ločeni presledki vrednosti ključne besede ali dolžine za 2D-pretvorbo in do tri vrednosti za 3D-pretvorbo.

Uporaba zgornje kode na polju 200 x 200 slikovnih pik, s preoblikovanjem, ki se uporabi za prehod z dogodkom klika, bi se obnašala tako:

Oglejte si to pisalo!

Izvor pretvorbe je privzeto "50% 50%", kar je točno v središču katerega koli elementa. Če spremenite izvor v "zgoraj levo" (kot v predstavitvi zgoraj), element uporabi zgornji levi kot elementa kot točko vrtenja.

Vrednosti so lahko dolžine, odstotki ali ključne besede top, left, right, bottom, in center.

Prva vrednost je vodoravni položaj, druga vrednost je navpična in tretja vrednost predstavlja položaj na osi Z. Tretja vrednost bo delovala samo, če uporabljate 3D-pretvorbe in ne more biti odstotek.

Glejte sliko Shaw (@shshaw) s preoblikovalnim peresom Pen na CodePen.