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-*：该类用于垂直倾斜元素特定值。{*}此处指定可以根据需要设置的不同斜切值。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

Tailwind CSS 变换示例

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

水平倾斜元素

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

示例

Open Compiler

<!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-*类的用法。

示例

Open Compiler

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

打印页面