Tailwind Transform Origin

The transform-origin utility class in Tailwind CSS allows you to specify the origin point of a transformation applied to an element. The origin point determines the reference point around which the transformation occurs, such as rotation, scaling, or skewing.

Setting the Transform Origin

To set the transform origin of an element, you can use the origin-{value} utility class, where {value} represents the desired origin point. The available values include center, top, right, bottom, left, top-right, top-left, bottom-right, and bottom-left, providing flexibility in positioning the origin point.

Here's an example:

<div class="origin-center">
  <!-- Content here -->
</div>
<div class="origin-top-left">
  <!-- Content here -->
</div>
<div class="origin-top-right">
  <!-- Content here -->
</div>

Preview

Responsive Transform Origins

Tailwind CSS allows you to apply transform origins responsively at different breakpoints. To use responsive transform origin classes, you can append the breakpoint prefix to the utility class. For example, md:origin-center sets the transform origin to the center of the element starting from the medium breakpoint and above.

<div class="origin-center md:origin-top-right">
  <!-- Content here -->
</div>

In the above example, the element has a transform origin of the center, but starting from the medium breakpoint and above, it changes to the top right corner.

Combining Transform Origins

You can combine transform origins with other transformation utility classes in Tailwind CSS to achieve more complex visual effects. For example, you can combine the origin class with the rotate class to set the transform origin and apply a rotation:

<div>
<div class="origin-center rotate-45">
  <!-- Content here -->
</div>
</div>

Preview

In the above example, the element has a transform origin set to the center and is rotated by 45 degrees.

Tailwind Transform Origin Class Table

Windframe Tailwind blocks

landing page