Tailwind CSS - 變換

上一個
下一個

Tailwind CSS 變換是 Tailwind CSS 中重要的實用程式類，用於對元素進行不同的變換。它包含一系列 Tailwind CSS 變換類，例如縮放、旋轉、平移、傾斜和變換原點。

Tailwind CSS 變換

下面提到的主題可用於對元素應用有效的變換。

主題 描述 示例
Tailwind CSS - 縮放 縮放類用於透過縮放元素來應用變換。
Tailwind CSS - 旋轉 旋轉類用於透過旋轉元素來應用變換。
Tailwind CSS - 平移 平移類用於透過平移元素來應用變換。
Tailwind CSS - 傾斜 傾斜類用於透過傾斜元素來應用變換。
Tailwind CSS - 變換原點 變換原點類用於透過指定元素的原點來應用變換。

Tailwind CSS 變換示例

在下面的示例中，我們將介紹一些上面提到的變換類。

<!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>
列印頁面
上一個
下一個
廣告