Transform origin

Utilities for specifying the origin for an element's transformations

Class reference

origin-centertransform-origin: center
origin-toptransform-origin: top
origin-top-righttransform-origin: top right
origin-righttransform-origin: right
origin-bottom-righttransform-origin: bottom right
origin-bottomtransform-origin: bottom
origin-bottom-lefttransform-origin: bottom left
origin-lefttransform-origin: left
origin-top-lefttransform-origin: top left


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 ...">


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.