Transform origin

Class reference

# Usage

Specify an element’s transform origin using the origin-{keyword} utilities.

<img class="origin-center transform rotate-45 ...">
<img class="origin-top-left transform rotate-45 ...">
<img class="origin-bottom-right transform rotate-45 ...">
<img class="origin-left transform rotate-45 ...">

# Responsive

To control the transform-origin of an element at a specific breakpoint, add a {screen}: prefix to any existing transform-origin utility. For example, use md:origin-top to apply the origin-top utility at only medium screen sizes and above.

<img class="origin-center md:origin-top ...">

For more information about Elements’ responsive design features, check out the Responsive Design documentation.