Transform-oprindelse - CSS-tricks

Den transform-originegenskab bruges sammen med CSS transformationer, så du kan ændre udgangspunktet for en transformation.

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

Som angivet ovenfor kan transform-originegenskaben tage op til to plads-adskilte nøgleord eller længdeværdier for en 2D-transformation og op til tre værdier for en 3D-transformation.

Brug af koden ovenfor på en 200px x 200px-boks, med transformen anvendt på en overført ved hjælp af en klikhændelse, vil opføre sig sådan:

Tjek denne pen!

Som standard er oprindelsen af en transformation “50% 50%”, hvilket er nøjagtigt i midten af et givet element. Ændring af oprindelsen til "øverst til venstre" (som i demoen ovenfor) får elementet til at bruge det øverste venstre hjørne af elementet som et omdrejningspunkt.

Værdier kan være længder, procenter eller de søgeord top, left, right, bottom, og center.

Den første værdi er den vandrette position, den anden værdi er den lodrette, og den tredje værdi repræsenterer positionen på Z-aksen. Den tredje værdi fungerer kun, hvis du bruger 3D-transformationer, og det kan ikke være en procentdel.

Se Pen-transform-origin illustration af Shaw (@shshaw) på CodePen.