Tailwind CSS - 旋转

Tailwind CSS rotate是一个用于通过旋转元素来应用变换的实用程序。

Tailwind CSS 旋转类

以下是用于应用旋转变换的Tailwind CSS Rotate类的列表

类	CSS 属性

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);

Tailwind CSS 旋转类的功能

rotate-*：类用于按特定角度旋转元素。{*}在此指定可以根据需要设置的不同旋转角度。

Tailwind CSS 变换示例

以下示例将说明元素的不同变换。

设置元素旋转变换

以下示例说明了rotate-*类的用法。

示例

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

打印页面