Tailwind Transform

The transform utility class in Tailwind CSS allows you to apply various transformation effects to elements. With Tailwind's transform class, you can easily rotate, scale, translate, or skew elements to create visually appealing designs.

Applying Transformations

To apply a transformation effect to an element, you can use the transform-{type}-{value} utility class. The {type} represents the type of transformation, and the {value} represents the degree, scale factor, or offset for the transformation. Here are some common transformation types:

• rotate-{angle}: Rotates the element by the specified {angle} in degrees. For example, transform-rotate-45 rotates the element by 45 degrees.
• scale-{factor}: Scales the element by the specified {factor}. For example, transform-scale-125 scales the element to 125% of its original size.
• translate-x-{value}: Translates the element horizontally by the specified {value}. For example, transform-translate-x-2 moves the element 2 rem to the right.
• translate-y-{value}: Translates the element vertically by the specified {value}. For example, transform-translate-y-[-4] moves the element 4 rem upward.
• skew-x-{angle}: Skews the element along the x-axis by the specified {angle} in degrees. For example, transform-skew-x-[-10] skews the element by -10 degrees along the x-axis.
• skew-y-{angle}: Skews the element along the y-axis by the specified {angle} in degrees. For example, transform-skew-y-6 skews the element by 6 degrees along the y-axis.

<div class="transform rotate-45.."></div>
<div class="transform skew-y-12.."></div>
<div class="transform translate-x-4 translate-y-3.."></div>

Preview

Responsive Transformations

Tailwind CSS allows you to apply transformation classes responsively at different breakpoints. To use responsive transformation classes, you can append the breakpoint prefix to the utility class. For example, md:transform-rotate-45 applies the rotation transformation starting from the medium breakpoint and above.

<div class="transform rotate-45 md:transform-rotate-90">
  Hello World
</div>

In the above example, the rotation transformation is applied to the element by default (rotate-45), but starting from the medium breakpoint and above, the rotation is changed to rotate-90.

Tailwind Transform Class Table

Windframe Tailwind blocks

landing page