Tailwind CSS - 缩放

Tailwind CSS Scale 是一种用于通过缩放元素来应用变换的实用程序。

Tailwind CSS 缩放类

以下是用于应用缩放变换的Tailwind CSS 缩放类的列表

类	CSS 属性
scale-0	transform: scale(0);
scale-x-0	transform: scaleX(0);
scale-y-0	transform: scaleY(0);
scale-50	transform: scale(.5);
scale-x-50	transform: scaleX(.5);
scale-y-50	transform: scaleY(.5);
scale-75	transform: scale(.75);
scale-x-75	transform: scaleX(.75);
scale-y-75	transform: scaleY(.75);
scale-90	transform: scale(.9);
scale-x-90	transform: scaleX(.9);
scale-y-90	transform: scaleY(.9);
scale-95	transform: scale(.95);
scale-x-95	transform: scaleX(.95);
scale-y-95	transform: scaleY(.95);
scale-100	transform: scale(1);
scale-x-100	transform: scaleX(1);
scale-y-100	transform: scaleY(1);
scale-105	transform: scale(1.05);
scale-x-105	transform: scaleX(1.05);
scale-y-105	transform: scaleY(1.05);
scale-110	transform: scale(1.1);
scale-x-110	transform: scaleX(1.1);
scale-y-110	transform: scaleY(1.1);
scale-125	transform: scale(1.25);
scale-x-125	transform: scaleX(1.25);
scale-y-125	transform: scaleY(1.25);
scale-150	transform: scale(1.5);
scale-x-150	transform: scaleX(1.5);
scale-y-150	transform: scaleY(1.5);

Tailwind CSS 缩放类的功能

scale-*：类用于按特定值缩放元素。*此处指定可以根据需要设置的不同缩放值。
scale-x-*：类用于按特定值水平缩放元素。*此处指定可以根据需要设置的不同缩放值。
scale-y-*：类用于按特定值垂直缩放元素。*此处指定可以根据需要设置的不同缩放值。

Tailwind CSS 变换示例

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

缩放元素

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

示例

<!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 Scale Class
    </h2>
    <div class="flex gap-4">
        <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:scale-125 duration-500 ">
            Hover: scale-125
        </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:scale-150  duration-500 ">
            Hover: scale-150
        </div>
    </div>
</body>
</html>

水平和垂直缩放元素

以下示例说明了scale-x-*和scale-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 Scale-x-75 & Scale-y-75 Class
    </h2>
    <div class="flex gap-4">
        <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-x-75 duration-500 ">
            Hover: scale-x-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:scale-y-75 duration-500 ">
            Hover: scale-y-75
        </div>
    </div>
</body>
</html>

打印页面