Transforms
Transform Origin
Utilities for specifying the origin for an element's transformations.
Quick reference
| Class | Description |
|---|---|
origin-center | transform-origin: center |
origin-top | transform-origin: top |
origin-top-right | transform-origin: top right |
origin-right | transform-origin: right |
origin-bottom-right | transform-origin: bottom right |
origin-bottom | transform-origin: bottom |
origin-bottom-left | transform-origin: bottom left |
origin-left | transform-origin: left |
origin-top-left | transform-origin: top left |
Basic usage
Changing the transform origin
Specify an element’s transform origin using the origin-{keyword} utilities.
origin-center
origin-top-left
origin-bottom
html
<img class="rotate-30 origin-center ..." />
<img class="rotate-30 origin-top-left ..." />
<img class="rotate-30 origin-bottom ..." />Applying conditionally
Hover, focus, and other states
Warp lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:origin-top to only apply the origin-top utility on hover.
html
<div class="origin-center hover:origin-top"></div>Breakpoints and media queries
You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:origin-top to apply the origin-top utility at only medium screen sizes and above.
html
<div class="origin-center md:origin-top"></div>