Tailwind CSS 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 class="origin-center rotate-45">
  <!-- Content here -->
</div>

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

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.