Tailwind CSS 核心语法篇 八：元素变换

8. 变换 (Transforms)

变换（Transform）是 CSS 中一组功能强大的属性，它允许你在不影响文档流（即不推开其他元素）的情况下，对元素进行移动、旋转、缩放和倾斜。这是创建动态、富有交互性的 UI 动画的基础。Tailwind 将复杂的变换语法封装成了简单直观的工具类。

8.1 核心二维变换 (Core 2D Transforms)

二维变换是在 X 轴（水平）和 Y 轴（垂直）上对元素进行操作，这是最常用的一类变换。它们通常与 transition 结合使用，以创建平滑的交互效果。

  • translate (移动): 用于将元素从其原始位置移动。
  • rotate (旋转): 用于使元素围绕其中心点旋转。
  • scale (缩放): 用于放大或缩小元素，是创建悬停反馈的绝佳方式。
  • skew (倾斜): 用于使元素沿 X 轴或 Y 轴产生形变。
类别常用类名说明
移动translate-x-4, -translate-y-1/2分别沿 X 轴和 Y 轴移动
旋转rotate-45, -rotate-90顺时针或逆时针旋转
缩放scale-105, scale-x-150均匀缩放或仅沿 X 轴缩放
倾斜skew-x-6, -skew-y-3沿 X 轴或 Y 轴倾斜

代码范例：组合使用二维变换创建交互效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>2D Transforms</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-slate-100 p-8">
    <div class="grid grid-cols-2 md:grid-cols-4 gap-12 justify-items-center items-center text-center text-white font-bold">
      <!-- 悬停时放大 -->
      <div class="w-28 h-28 bg-sky-500 rounded-lg flex items-center justify-center transition hover:scale-110">
        Scale
      </div>
      <!-- 悬停时旋转 -->
      <div class="w-28 h-28 bg-red-500 rounded-lg flex items-center justify-center transition hover:rotate-45">
        Rotate
      </div>
      <!-- 悬停时向上移动 -->
      <div class="w-28 h-28 bg-amber-500 rounded-lg flex items-center justify-center transition hover:-translate-y-4">
        Translate
      </div>
      <!-- 悬停时倾斜 -->
      <div class="w-28 h-28 bg-emerald-500 rounded-lg flex items-center justify-center transition hover:skew-x-12">
        Skew
      </div>
    </div>
  </body>
</html>

8.2 变换原点 (Transform Origin)

默认情况下，所有变换（如旋转、缩放）都是围绕元素的中心点进行的。通过 origin-{location} 工具可以改变这个变换的“轴心点”，从而创造出完全不同的动画效果。

常用类名说明
origin-center中心点 (默认)
origin-top-left左上角
origin-bottom-right右下角
origin-top顶部中心
origin-bottom底部中心

代码范例：改变旋转的中心点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Transform Origin</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="p-16">
    <div class="grid grid-cols-3 gap-16 justify-items-center text-center text-white font-semibold">
      <div>
        <div class="w-24 h-24 bg-sky-500 transition duration-500 hover:rotate-45 origin-center"></div>
        <p class="mt-4">Origin Center</p>
      </div>
      <div>
        <!-- 像时钟指针一样从左上角旋转 -->
        <div class="w-24 h-24 bg-sky-500 transition duration-500 hover:rotate-45 origin-top-left"></div>
        <p class="mt-4">Origin Top Left</p>
      </div>
      <div>
        <!-- 像钟摆一样从底部中心旋转 -->
        <div class="w-24 h-24 bg-sky-500 transition duration-500 hover:rotate-45 origin-bottom"></div>
        <p class="mt-4">Origin Bottom</p>
      </div>
    </div>
  </body>
</html>