LEARN

Tailwind CSS Transform

This class accepts lots of value in tailwind CSS in which all the properties are covered in class form. This class is used to control the transform behavior of any element. In CSS, we can do that by using the CSS transform property.

Transform Property classes:

  • transform: This value is used to specify that no class will get a transition effect.
  • transform-gpu: All the class will get a transition effect. This is also the default value for this class.
  • transform-none: We can specify the names of CSS properties for which transition effect will be applied. We can also specify multiple properties by separating them with a comma.

Tailwind CSS transform

In Tailwind CSS, the transform utility enables you to apply various CSS transformations, such as translation, rotation, scaling, and skewing, to elements. Transformations are commonly used to create dynamic and interactive designs, animations, and transitions 

<img src="https://pagedone.io/asset/uploads/1732085745.png" alt="" class="w-16 transform -translate-x-4 translate-y-6">
        <img src="https://pagedone.io/asset/uploads/1732085745.png" alt="" class="w-16 transform rotate-45">
        <img src="https://pagedone.io/asset/uploads/1732085745.png" alt="" class="w-16 transform scale-50">
        <img src="https://pagedone.io/asset/uploads/1732085745.png" alt="" class="w-16 transform skew-x-6">

Tailwind css Transform Origin

In Tailwind CSS, the transform-origin utility is used to define the origin point (pivot point) for CSS transformations. This determines the position around which transformations like scaling, rotating, and skewing occur.

Transform Origin Property classes:

  • origin-center: This class is used to set the element’s origin as center.
  • origin-top: This class is used to set the element’s origin as top.
  • origin-top-right: This class is used to set the element’s origin as top-right.
  • origin-right: This class is used to set the element’s origin as right.
  • origin-bottom-right: This class is used to set the element’s origin as bottom-right
  • origin-bottom: This class is used to set the element’s origin as bottom.
  • origin-bottom-left: This class is used to set the element’s origin as bottom-left.
  • origin-left: This class is used to set the element's origin as left.
  • origin-top-left: This class is used to set the element’s origin as top-left. 
<div
            class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-3 w-full h-auto p-5 lg:p-3 border-2 border-indigo-600 rounded-lg">
            <div class="w-full h-autop-6 overflow-visible aspect-square bg-indigo-50 flex items-center justify-center">
                <div style="background-image: url(https://pagedone.io/asset/uploads/1732085745.png);"
                    class="w-16 h-16 bg-cover w-16 origin-center transform rotate-45">
                </div>
            </div>

            <div class="w-full h-autop-6 overflow-visible aspect-square bg-indigo-50 flex items-center justify-center">
                <div style="background-image: url(https://pagedone.io/asset/uploads/1732085745.png);"
                    class="w-16 h-16 bg-cover w-16 origin-top transform rotate-45">
                </div>
            </div>

            <div class="w-full h-autop-6 overflow-visible aspect-square bg-indigo-50 flex items-center justify-center">
                <div style="background-image: url(https://pagedone.io/asset/uploads/1732085745.png);"
                    class="w-16 h-16 bg-cover w-16 origin-bottom-right transform rotate-45">
                </div>
            </div>

            <div class="w-full h-autop-6 overflow-visible aspect-square bg-indigo-50 flex items-center justify-center">
                <div style="background-image: url(https://pagedone.io/asset/uploads/1732085745.png);"
                    class="w-16 h-16 bg-cover w-16 origin-left transform rotate-45">
                </div>
            </div>

        </div>

Tailwind css Scale

In Tailwind CSS, the scale utility is used to control the size of an element using the CSS transform: scale() property. It allows you to enlarge or shrink an element uniformly or independently along the X or Y axis.

Scale Property classes:

  • scale-0|50|75|90|95|100|105|110|125|150: This class is used to scale on both axis percentage-wise.
  • scale-x-0|50|75|90|95|100|105|110|125|150: This class is used to scale on x-axis percentage-wise.
  • scale-y-0|50|75|90|95|100|105|110|125|150: This class is used to scale on y-axis percentage-wise. 
<img src="https://pagedone.io/asset/uploads/1732085745.png" alt="" class="w-16 transform scale-100">
        <img src="https://pagedone.io/asset/uploads/1732085745.png" alt="" class="w-16 transform scale-75">
        <img src="https://pagedone.io/asset/uploads/1732085745.png" alt="" class="w-16 transform scale-x-75">
        <img src="https://pagedone.io/asset/uploads/1732085745.png" alt="" class="w-16 transform scale-y-75">

1000+ Tailwind Blocks

Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.

Explore More

Tailwind css Rotate

In Tailwind CSS, the rotate utility allows you to rotate an element by a specified degree using the CSS transform: rotate() property. It’s a key part of creating dynamic and interactive designs.

Rotate Property classes:

  • rotate-0: This class is for no rotation.
  • rotate-1: This class is used to rotate 1 degree clockwise.
  • rotate-2: This class is used to rotate 2 degree clockwise.
  • rotate-3: This class is used to rotate 3 degree clockwise.
  • rotate-6: This class is used to rotate 6 degree clockwise.
  • rotate-12: This class is used to rotate 12 degree clockwise.
  • rotate-45: This class is used to rotate 45 degree clockwise.
  • rotate-90: This class is used to rotate 90 degree clockwise.
  • rotate-180: This class is used to rotate 180 degree clockwise.
  • -rotate-1: This class is used to rotate 1 degree anti-clockwise.
  • -rotate-2: This class is used to rotate 2 degree anti-clockwise.
  • -rotate-3: This class is used to rotate 3 degree anti-clockwise.
  • -rotate-6: This class is used to rotate 6 degree anti-clockwise.
  • -rotate-12: This class is used to rotate 12 degree anti-clockwise.
  • -rotate-45: This class is used to rotate 45 degree anti-clockwise.
  • -rotate-90: This class is used to rotate 90 degree anti-clockwise.
  • -rotate-180: This class is used to rotate 180 degree anti-clockwise. 
<img src="https://pagedone.io/asset/uploads/1732085745.png" alt="" class="w-16 transform rotate-0">
        <img src="https://pagedone.io/asset/uploads/1732085745.png" alt="" class="w-16 transform rotate-45">
        <img src="https://pagedone.io/asset/uploads/1732085745.png" alt="" class="w-16 transform rotate-90">
        <img src="https://pagedone.io/asset/uploads/1732085745.png" alt="" class="w-16 transform -rotate-45">

Tailwind css Translate

In Tailwind CSS, the translate utility is used to move an element along the X or Y axis using the CSS transform: translate() property. This is helpful for animations, positioning, and creating dynamic layouts.

Translate Property classes:

  • translate-x-{amount} This class holds the length of translation corresponding to the x-axis.
  • -translate-x-{amount}: This parameter holds the length of translation corresponding to the reverse x-axis.
  • translate-y-{amount}: This parameter holds the length of translation corresponding to the y-axis.
  • -translate-y-{amount}: This parameter holds the length of translation corresponding to the reverse y-axis. 
<img src="https://pagedone.io/asset/uploads/1732085745.png" alt="" class="w-16 transform -translate-x-6">
        <img src="https://pagedone.io/asset/uploads/1732085745.png" alt="" class="w-16 transform translate-y-6">
        <img src="https://pagedone.io/asset/uploads/1732085745.png" alt="" class="w-16 transform -translate-y-6">
        <img src="https://pagedone.io/asset/uploads/1732085745.png" alt="" class="w-16 transform translate-x-6">
        <img src="https://pagedone.io/asset/uploads/1732085745.png" alt="" class="w-16 transform translate-x-6 translate-y-6">

Figma

You can also find this component in Figma. Check the Pagedone Figma Design System.

Preview Buy Now
image

1000+ Tailwind Blocks

Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.

Explore More