Tailwind CSS - 位移

# Tailwind CSS：掌握位移（Translate）与变换（Transforms）

位移（Translate）工具类允许你在 X 轴或 Y 轴上移动元素。这是一种 CSS 变换（transform），意味着它在视觉上移动元素，而不会像外边距（margin）那样影响布局流中其他元素的位置。这使得它非常适合动画和交互式 UI 效果。

## 核心位移工具类

命名约定很简单：translate-{axis}-{amount}。{amount} 值取自你在 tailwind.config.js 中定义的 spacing 比例尺。

类名模式	示例
translate-x-{amount}	translate-x-4（向右移动 1rem），translate-x-1/2（向右移动 50%），-translate-x-full（向左移动 100%）
translate-y-{amount}	translate-y-8（向下移动 2rem），translate-y-px（向下移动 1px），-translate-y-1/2（向上移动 50%）

你可以通过在类名前添加 - 前缀来使用负值，这会反转位移的方向。

## 组合变换

Tailwind 最强大的功能之一是它如何智能地将多个变换工具类（translate、scale、rotate、skew）组合成一个单一的 CSS transform 属性。这让你能够以声明式的方式组合复杂的变换效果。

<!-- 这个按钮在悬停时会向上移动、放大并轻微旋转 -->
<button class="transition-transform duration-300
               hover:-translate-y-1 hover:scale-110 hover:rotate-3">
  Transform Me
</button>

## 实际应用：侧滑菜单

translate 的一个经典用例是创建一个侧滑（off-canvas）边栏，使其滑入视图。此示例将位移工具类与过渡效果以及少量 JavaScript 结合起来，以切换菜单的状态。

### 示例：滑动侧边栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Off-Canvas Menu</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-100">

  <div class="p-8">
    <button id="open-menu" class="rounded-lg bg-blue-600 px-5 py-2.5 text-white font-medium hover:bg-blue-700">
      Open Menu
    </button>
  </div>

  <!-- 菜单容器 -->
  <div id="menu-backdrop" class="fixed inset-0 bg-black/30 z-40 hidden"></div>

  <!-- 侧滑菜单本身 -->
  <div id="menu"
       class="fixed top-0 right-0 bottom-0 z-50 w-80 bg-white shadow-lg
              transform transition-transform duration-300 ease-in-out translate-x-full">
    <div class="p-6">
      <h2 class="text-lg font-semibold">Menu</h2>
      <ul class="mt-4 space-y-2">
        <li><a href="#" class="block p-2 rounded hover:bg-gray-100">Home</a></li>
        <li><a href="#" class="block p-2 rounded hover:bg-gray-100">About</a></li>
        <li><a href="#" class="block p-2 rounded hover:bg-gray-100">Contact</a></li>
      </ul>
      <button id="close-menu" class="mt-6 w-full rounded-lg bg-gray-200 py-2">Close</button>
    </div>
  </div>

  <script>
    const menu = document.getElementById('menu');
    const backdrop = document.getElementById('menu-backdrop');
    const openBtn = document.getElementById('open-menu');
    const closeBtn = document.getElementById('close-menu');

    const openMenu = () => {
      backdrop.classList.remove('hidden');
      menu.classList.remove('translate-x-full');
    };

    const closeMenu = () => {
      backdrop.classList.add('hidden');
      menu.classList.add('translate-x-full');
    };

    openBtn.addEventListener('click', openMenu);
    closeBtn.addEventListener('click', closeMenu);
    backdrop.addEventListener('click', closeMenu);
  </script>

</body>
</html>

## 微调与性能

### 用于精度的任意值

对于你的主题中没有的、需要特定像素值的位移，请使用任意值。

<div class="translate-x-[17px] -translate-y-[23px]">
  Precisely positioned.
</div>

### 专业提示：硬件加速

为了实现丝滑流畅的动画，你可以向浏览器提示应使用 GPU 进行 transform 渲染。Tailwind 为此提供了 transform-gpu 工具类。对于移动的元素，通常最好将其与你的过渡工具类一起添加。

<!-- transform-gpu 将元素提升到它自己的合成层 -->
<div class="transition transform-gpu hover:-translate-y-2">
  Smoothly animated card
</div>