Tailwind CSS - 斜切 (Skew)

Tailwind CSS 斜切 (Skew) 是一個用於透過傾斜元素來應用變換的實用程式。

Tailwind CSS 斜切類

以下是用於應用斜切變換的Tailwind CSS 斜切類的列表

類名	CSS 屬性
skew-x-0	transform: skewX(0deg);
skew-y-0	transform: skewY(0deg);
skew-x-1	transform: skewX(1deg);
skew-y-1	transform: skewY(1deg);
skew-x-2	transform: skewX(2deg);
skew-y-2	transform: skewY(2deg);
skew-x-3	transform: skewX(3deg);
skew-y-3	transform: skewY(3deg);
skew-x-6	transform: skewX(6deg);
skew-y-6	transform: skewY(6deg);
skew-x-12	transform: skewX(12deg);
skew-y-12	transform: skewY(12deg);

Tailwind CSS 斜切類的功能

skew-x-*：該類用於水平傾斜元素特定值。{*}此處指定可以根據需要設定的不同斜切值。
skew-y-*：該類用於垂直傾斜元素特定值。{*}此處指定可以根據需要設定的不同斜切值。

Tailwind CSS 變換示例

以下示例將說明元素的不同變換。

水平傾斜元素

以下示例說明了skew-x-*類的用法。

示例

<!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 Skew Classes
    </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:skew-x-6 duration-500 ">
                Hover: skew-x-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>
</body>
</html>

垂直傾斜元素

以下示例說明了skew-y-*類的用法。

示例

<!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 Skew Classes
    </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:skew-y-6 duration-500 ">
                Hover: skew-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-y-12 duration-500 ">
                Hover: skew-y-12
            </div>
    </div>
</body>
</html>

列印頁面