Tailwind CSS - 变换

上一个
下一个

Tailwind CSS 变换是 Tailwind CSS 中重要的实用程序类，用于对元素进行不同的变换。它包含一系列 Tailwind CSS 变换类，例如缩放、旋转、平移、倾斜和变换原点。

Tailwind CSS 变换

下面提到的主题可用于对元素应用有效的变换。

主题 描述 示例
Tailwind CSS - 缩放 缩放类用于通过缩放元素来应用变换。
Tailwind CSS - 旋转 旋转类用于通过旋转元素来应用变换。
Tailwind CSS - 平移 平移类用于通过平移元素来应用变换。
Tailwind CSS - 倾斜 倾斜类用于通过倾斜元素来应用变换。
Tailwind CSS - 变换原点 变换原点类用于通过指定元素的原点来应用变换。

Tailwind CSS 变换示例

在下面的示例中，我们将介绍一些上面提到的变换类。

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 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>
打印页面
上一个
下一个
广告