Tailwind CSS - Bonus
Tailwind CSS - Using with Preprocessors
Tailwind CSS - Optimizing for Production

Tailwind CSS - Transforms

Quiz

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.	Try It
Tailwind CSS - Rotate	Rotate class is used to apply transformation by rotating an element.	Try It
Tailwind CSS - Translate	Translate class is used to apply transformation by translating an element.	Try It
Tailwind CSS - Skew	Skew class is used to apply transformation by skewing an element.	Try It
Tailwind CSS - Transform Origin	Transform Origin class is used to apply transformation by Specifying an element's origin.	Try It

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>

Print Page