36. 变换：旋转、缩放与位移

本节目标：掌握 Tailwind CSS 中 transform 相关的工具类，学会旋转、缩放、位移元素，理解变换原点的概念和组合变换的规则。

Transform 能让元素旋转、缩放、位移，最关键的一点：它不影响文档流。元素看起来跑了，但它原来的位置还占着——周围元素不会跟着动。

旋转变换

旋转变换围绕一个点转动元素，正值顺时针，负值逆时针：

<!-- 基础旋转角度 -->
<div class="rotate-0">0度</div>
<div class="rotate-45">45度</div>
<div class="rotate-90">90度</div>
<div class="rotate-180">180度</div>

<!-- 负值旋转（逆时针） -->
<div class="-rotate-45">-45度</div>

<!-- 悬停旋转效果 -->
<button class="p-2 rounded-lg hover:rotate-12 transition-transform duration-300">
  <svg class="w-6 h-6"><!-- 图标 --></svg>
</button>

<!-- 1度精度的旋转 -->
<div class="rotate-1">1度</div>
<div class="rotate-2">2度</div>
<div class="rotate-3">3度</div>
<div class="rotate-6">6度</div>
<div class="rotate-12">12度</div>

常见场景——下拉箭头旋转：

<button class="flex items-center gap-2 px-4 py-2 border rounded-lg">
  菜单
  <svg class="w-4 h-4 transition-transform duration-200"
       :class="open && 'rotate-180'">
    <path d="M5 7l5 5 5-5"/>
  </svg>
</button>

缩放变换

缩放变换改变元素的大小比例：

<!-- 等比缩放 -->
<div class="scale-50">50%</div>
<div class="scale-75">75%</div>
<div class="scale-100">100%（默认）</div>
<div class="scale-125">125%</div>
<div class="scale-150">150%</div>

<!-- 不等比缩放 -->
<div class="scale-x-125">水平 125%</div>
<div class="scale-y-75">垂直 75%</div>

<!-- 悬停放大效果 -->
<img class="w-32 h-32 object-cover transition-transform duration-300 hover:scale-110"
     src="photo.jpg" alt="">

<!-- 点击缩小效果 -->
<button class="px-4 py-2 bg-blue-500 text-white rounded-lg
               transition-transform duration-150
               active:scale-95">
  按下缩小
</button>

Note

scale 只改变元素的视觉大小，不改变它占据的布局空间。如果你需要改变元素的实际尺寸，使用 width/height 工具类。

位移变换

位移变换将元素从原始位置移动，同样不影响文档流：

<!-- 水平位移 -->
<div class="translate-x-4">向右 1rem</div>
<div class="-translate-x-4">向左 1rem</div>

<!-- 垂直位移 -->
<div class="translate-y-4">向下 1rem</div>
<div class="-translate-y-4">向上 1rem</div>

<!-- 同时位移 -->
<div class="translate-x-2 translate-y-2">向右下</div>

<!-- 使用任意值 -->
<div class="translate-x-[117px]">向右 117px</div>
<div class="translate-y-[50%]">向下 50%</div>

常见的间距递进：

translate-x-0  → 0px
translate-x-px → 1px
translate-x-0.5 → 0.125rem (2px)
translate-x-1  → 0.25rem (4px)
translate-x-2  → 0.5rem (8px)
translate-x-4  → 1rem (16px)
translate-x-8  → 2rem (32px)
translate-x-16 → 4rem (64px)
// ... 以此类推

倾斜变换

倾斜变换让元素沿轴倾斜，制造透视感：

<!-- 水平倾斜 -->
<div class="skew-x-3">倾斜 3度</div>
<div class="skew-x-6">倾斜 6度</div>
<div class="skew-x-12">倾斜 12度</div>

<!-- 垂直倾斜 -->
<div class="skew-y-3">垂直倾斜 3度</div>

<!-- 负值倾斜 -->
<div class="-skew-x-6">反向倾斜</div>

倾斜在实际项目中用得不多，但在一些创意设计或特殊效果中会出现。

变换原点

变换原点是变换的基准点。默认是元素中心（origin-center）：

<!-- 以左上角为原点旋转 -->
<div class="origin-top-left rotate-45">绕左上角旋转</div>

<!-- 以底部中心为原点旋转 -->
<div class="origin-bottom rotate-180">绕底部旋转</div>

<!-- 以右侧中心为原点缩放 -->
<div class="origin-right scale-x-125">从右侧开始缩放</div>

可用的原点位置：

origin-center：中心（默认）
origin-top：顶部中心
origin-top-right：右上角
origin-right：右侧中心
origin-bottom-right：右下角
origin-bottom：底部中心
origin-bottom-left：左下角
origin-left：左侧中心
origin-top-left：左上角

实际应用——下拉菜单从顶部展开：

<div class="absolute top-full left-0 w-48 origin-top scale-y-0
            transition-transform duration-200
            group-hover:scale-y-100">
  下拉菜单内容
</div>

组合变换

多个变换可以同时应用，顺序会影响最终效果：

<!-- 先旋转再位移（围绕旋转后的坐标轴移动） -->
<div class="rotate-45 translate-x-4">先旋转后位移</div>

<!-- 先位移再旋转 -->
<div class="translate-x-4 rotate-45">先位移后旋转</div>

<!-- 缩放 + 旋转 -->
<img class="scale-110 rotate-3">放大并旋转</img>

<!-- 完整的悬停效果 -->
<div class="transition-all duration-300 ease-out
            hover:scale-105 hover:rotate-1 hover:-translate-y-1">
  悬停组合效果
</div>

Warning

在 v4 中，transform-none 不能再重置 rotate、scale、translate 的单独设置。需要分别使用 rotate-none、scale-none、translate-none 来重置。

<!-- v3 写法（已失效） -->
<button class="scale-150 focus:transform-none">错误</button>

<!-- v4 正确写法 -->
<button class="scale-150 focus:scale-none">正确</button>

实际应用场景

实际项目中，变换一般这么用：

<!-- 1. 图片悬停放大 -->
<div class="overflow-hidden rounded-lg">
  <img class="w-full h-48 object-cover transition-transform duration-500 hover:scale-110"
       src="photo.jpg" alt="">
</div>

<!-- 2. 卡片悬停上浮 -->
<div class="p-6 rounded-xl shadow-md transition-all duration-300
            hover:-translate-y-2 hover:shadow-xl">
  卡片内容
</div>

<!-- 3. 加载指示器旋转 -->
<svg class="animate-spin w-5 h-5" viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" fill="none"/>
</svg>

<!-- 4. 图标按钮悬停旋转 -->
<button class="p-2 rounded-full transition-transform duration-200 hover:rotate-12">
  <svg class="w-5 h-5"><!-- 设置图标 --></svg>
</button>

<!-- 5. 模态框入场动画 -->
<div class="scale-95 opacity-0 transition-all duration-300
            data-[state=open]:scale-100 data-[state=open]:opacity-100">
  模态框内容
</div>

变换是微交互的基础工具，配合过渡使用效果更丝滑。记住一条铁律：能用 transform 和 opacity 实现的动画，就别碰影响布局的属性——这是流畅 60fps 的关键。