Pôvod transformácie - Triky CSS

Táto transform-originvlastnosť sa používa v spojení s transformáciami CSS, čo vám umožňuje zmeniť východiskový bod transformácie.

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

Ako je uvedené vyššie, transform-originvlastnosť môže trvať až dve hodnoty kľúčového slova alebo dĺžky dĺžky oddelené pre 2D transformáciu a až tri hodnoty pre 3D transformáciu.

Použitie vyššie uvedeného kódu v poli 200 x 200 pixlov s transformáciou použitou na prechod pomocou udalosti kliknutia by sa správalo takto:

Vyskúšajte toto pero!

V predvolenom nastavení je pôvod transformácie „50% 50%“, čo je presne v strede ľubovoľného daného prvku. Zmena pôvodu na „ľavý horný“ (ako v ukážke vyššie) spôsobí, že prvok použije ľavý horný roh prvku ako bod rotácie.

Hodnoty môžu byť dĺžky, percentuálne alebo kľúčové slová top, left, right, bottom, a center.

Prvá hodnota je vodorovná poloha, druhá hodnota je zvislá a tretia hodnota predstavuje polohu na osi Z. Tretia hodnota bude fungovať, iba ak používate 3D transformácie, a nemôže to byť percento.

Pozrite si ilustráciu pôvodu transformácie pera od Shawa (@shshaw) na CodePen.