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>

列印頁面