Skip to content
Transforms and animation

transform-origin

Sets the point around which transforms are applied. The default origin is the center of the element.

548 effects in the catalog use this property.

Syntax

transform-origin: <x> <y> [<z>];

Watch out

Natural menus and door-like effects depend on this value. A menu that scales from its top edge usually feels more grounded than one expanding from the center.

Common values

left center
Open like a hinge from the left edge
bottom
Scale upward from the bottom

Effects using transform-origin

These are working effects from the catalog. Open a tile to inspect the full source.