Tailwind CSS - Rotate

Previous
Quiz
Next

Tailwind CSS rotate is a utility that is used to apply transformation by rotating an element.

Tailwind CSS Rotate Classes

The following is the list of Tailwind CSS Rotate Classes that are used to apply rotating Transform

Class CSS Properties
rotate-0 transform: rotate(0deg);
rotate-1 transform: rotate(1deg);
rotate-2 transform: rotate(2deg);
rotate-3 transform: rotate(3deg);
rotate-6 transform: rotate(6deg);
rotate-12 transform: rotate(12deg);
rotate-45 transform: rotate(45deg);
rotate-90 transform: rotate(90deg);
rotate-180 transform: rotate(180deg);

Functionality of Tailwind CSS Rotate Classes

  • rotate-*: Class is used to rotate an element by a specific degree. {*} here specifying the different rotating degrees that can be set as per the need.

Tailwind CSS Transform Example

The following example will illustrate the different transformation for an element.

Setting Elements Rotating Transformation

The below example is illustrating the use of rotate-* class.

Example

<!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 Rotate Class
    </h2>
    <div class="flex gap-6">
        <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-45  duration-500 ">
            Hover: rotate-45
        </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:rotate-180  duration-500 ">
            Hover: rotate-180
        </div>
    </div>
</body>
</html>
Print Page
Previous
Next