Tailwind CSS - Transforms


Tailwind CSS Transforms are important utility classes of tailwind CSS that make different transformations in elements. It consists of a list of tailwind CSS Transform classes such as scale, rotate, translate, skew, and transform-origin.

Tailwind CSS Transforms

Below mentioned topics can be used to apply an effective Transformations on elements.

Topic Description Example
Tailwind CSS - Scale Scale class is used to apply transformation by scailing an element.
Tailwind CSS - Rotate Rotate class is used to apply transformation by rotating an element.
Tailwind CSS - Translate Translate class is used to apply transformation by translating an element.
Tailwind CSS - Skew Skew class is used to apply transformation by skewing an element.
Tailwind CSS - Transform Origin Transform Origin class is used to apply transformation by Specifying an element's origin.

Example of Tailwind CSS Transform

In the following example we will cover some of the above mentioned Transform classes

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
    <h2 class="text-2xl font-bold mb-3">
        Tailwind CSS Transform Classes
    </h2>
    <div class="flex gap-6 flex-wrap">
        <div class="w-28 h-28 p-6 bg-green-500 text-center font-bold 
                text-white text-center font-bold text-white  
                hover:scale-75  duration-500 ">
            Hover: Scale-75
        </div>
        <div class="w-28 h-28 p-6 bg-green-500 text-center font-bold 
                text-white text-center font-bold text-white  
                hover:rotate-90 duration-500 ">
            Hover: rotate-90
        </div>
        <div class="w-28 h-28 p-6 bg-green-500 text-center font-bold 
                text-white text-center font-bold text-white  
                hover:translate-y-6  duration-500 ">
            Hover: translate-y-6
        </div>
        <div class="w-28 h-28 p-6 bg-green-500 text-center font-bold 
                text-white text-center font-bold text-white  
                hover:skew-x-12  duration-500 ">
            Hover: skew-x-12
        </div>
        <div class="w-28 h-28 p-3 bg-green-500 text-center font-bold 
                text-white text-center font-bold text-white  
                hover:origin-bottom-right hover:rotate-45
                duration-500 ">
            Hover: origin-bottom-right
        </div>
    </div>
</body>
</html>