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>

列印頁面