Tailwind CSS - 缩放

Tailwind CSS - 变换缩放

Tailwind CSS 中的 scale（缩放）工具类允许你使用 CSS transform 属性来调整元素大小。这非常适合创建交互式 UI (用户界面) 反馈，例如悬停或聚焦时的缩放效果，而不会影响文档布局。

可用的缩放工具类

Tailwind 提供了一整套类，用于按比例缩放元素，或沿单个轴（X 轴或 Y 轴）缩放元素。

类名	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);

用法和最佳实践

缩放与 transition（过渡）结合使用时最有效，可以创建平滑的动画。使用 hover:、focus: 和 group-hover: 等状态修饰符，在用户交互期间应用缩放效果。

• scale-{amount}：按比例在 X 轴和 Y 轴上缩放元素。
• scale-x-{amount}：仅水平缩放元素。
• scale-y-{amount}：仅垂直缩放元素。

示例：交互式卡片网格

此示例演示了如何创建一个视觉上引人入胜的卡片网格，这些卡片在悬停时会放大。请注意 transition (过渡)、duration (持续时间) 和 ease-in-out (缓入缓出) 的使用，以使效果流畅。

<!DOCTYPE html>
<html lang="en">
 <head>
  <script src="https://cdn.tailwindcss.com"></script>
 </head>
 <body class="bg-gray-100 p-8">
  <h2 class="text-3xl font-bold mb-6 text-center">交互式卡片网格</h2>
  <div class="grid md:grid-cols-3 gap-8">
    <!-- 卡片 1：均匀缩放 -->
    <div class="group bg-white p-6 rounded-lg shadow-md transition-transform duration-300 ease-in-out hover:scale-105">
        <h3 class="text-xl font-semibold mb-2">缩放</h3>
        <p class="text-gray-600">此卡片在悬停时均匀放大。</p>
    </div>
    <!-- 卡片 2：水平缩放 -->
    <div class="group bg-white p-6 rounded-lg shadow-md transition-transform duration-300 ease-in-out hover:scale-x-110">
        <h3 class="text-xl font-semibold mb-2">X 轴缩放</h3>
        <p class="text-gray-600">此卡片在悬停时水平缩放。</p>
    </div>
    <!-- 卡片 3：垂直缩放 -->
    <div class="group bg-white p-6 rounded-lg shadow-md transition-transform duration-300 ease-in-out hover:scale-y-110">
        <h3 class="text-xl font-semibold mb-2">Y 轴缩放</h3>
        <p class="text-gray-600">此卡片在悬停时垂直缩放。</p>
    </div>
  </div>
 </body>
</html>

专家提示：任意值

对于精确缩放，请在方括号中使用任意值。当默认缩放值不符合你的设计规范时，这非常有用。

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-8">
  <h2 class="text-2xl font-bold mb-4">任意缩放值</h2>
  <div class="w-32 h-32 bg-purple-500 text-white flex items-center justify-center rounded-lg transition hover:scale-[1.15]">
    悬停我！
  </div>
</body>
</html>

性能考量

CSS transform（变换）属性，例如 scale，具有很高的性能，因为它们通常由 GPU (图形处理器) 处理。这意味着它们不会触发耗费性能的浏览器重绘或回流，即使在性能较低的设备上也能实现流畅的动画。