Transformační původ - Triky CSS

Tato transform-originvlastnost se používá ve spojení s transformacemi CSS, což vám umožňuje změnit výchozí bod transformace.

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

Jak je uvedeno výše, transform-originvlastnost může mít pro 2D transformaci až dvě hodnoty klíčového slova nebo délky oddělené mezerou a pro 3D transformaci až tři hodnoty.

Použití výše uvedeného kódu v poli 200 × 200 pixelů s transformací aplikovanou na přechod pomocí události kliknutí by se chovalo takto:

Podívejte se na toto pero!

Ve výchozím nastavení je počátek transformace „50% 50%“, což je přesně ve středu daného prvku. Změna počátku na „vlevo nahoře“ (jako v ukázce výše) způsobí, že prvek použije levý horní roh prvku jako bod otáčení.

Hodnoty mohou být délky, procentuální nebo klíčová slova top, left, right, bottom, a center.

První hodnota je vodorovná poloha, druhá hodnota je svislá a třetí hodnota představuje polohu na ose Z. Třetí hodnota bude fungovat, pouze pokud používáte 3D transformace, a nemůže to být procento.

Podívejte se na ilustraci původu transformace pera od Shawa (@shshaw) na CodePen.