Transforms

transform-origin

Setting the origin for an element’s transformations.

Class	Declarations
`transform-origin:top`	`transform-origin: top;`
`transform-origin:bottom`	`transform-origin: bottom;`
`transform-origin:right`	`transform-origin: right;`
`transform-origin:left`	`transform-origin: left;`
`transform-origin:center`	`transform-origin: center;`
`transform-origin:<value>`	`transform-origin: <value>;`
`transform-origin:<offset-x>\|<offset-y>`	`transform-origin: <offset-x> <offset-y>;`
`transform-origin:<offset-x>\|<offset-y>\|<offset-z>`	`transform-origin: <offset-x> <offset-y> <offset-z>;`

Examples

Use transform-origin:* to define the point an element rotates, scales, or skews around.

<div class="transform-origin:center transform:scale(.96):hover">    Scales from center</div>

Generated CSS

@layer utilities {    .transform-origin\:center {        transform-origin: center    }}

Separate multi-word origins with | so they become space-separated CSS values.

<div class="transform-origin:top|right transform:rotate(2deg)">    Rotates from the corner</div>

Menus, tooltips, and popovers usually feel more natural when their origin is close to the anchor that opened them.

<div class="transform-origin:top|left transform:scale(.98)">    Anchored menu</div>

Apply styles based on different states using selectors and conditional queries.

<div class="transform-origin:center:hover transform-origin:top|right@sm transform-origin:center@print">...</div>

Defining the layout box to which transform and transform-origin properties relate.

Setting how children of an element are rendered in the 3D space.