Tailwind CSS - Scale
Tailwind CSS Scale 是一款用于通过缩放元素来应用变换的实用程序。
Tailwind CSS Scale 类
以下是用于应用缩放变换的 Tailwind CSS Scale 类列表
| 类 | 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>
