graphql
react

Tailwind CSS 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.
html
<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.

html
<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

ClassProperties
transform--tw-translate-x:0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
transform-gpu--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;
transform: translate3d(var(--tw-translate-x),
var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
transform-nonetransform: none

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.

ad-banner