Tailwind CSS - 变换

Tailwind CSS - 变换

Tailwind CSS 提供了一套全面的功能类，用于应用 CSS 变换，例如 缩放（scale）、旋转（rotate）、平移（translate）和 倾斜（skew）。这些功能类使创建动态和交互式用户界面变得轻而易举。

要应用任何变换，你必须首先通过向元素添加 transform 功能类来启用它们。这将为各个变换功能类的工作设置必要的 CSS 属性。

变换功能类概述

功能类类型	描述	示例类
缩放 (Scale)	向上或向下缩放元素。	scale-110、scale-x-75、hover:scale-105
旋转 (Rotate)	旋转元素。	rotate-45、-rotate-90、hover:rotate-6
平移 (Translate)	在 X 或 Y 轴上移动元素。	translate-x-4、translate-y-1/2、hover:-translate-y-1
倾斜 (Skew)	在 X 或 Y 轴上倾斜元素。	skew-x-6、skew-y-12、hover:skew-x-3
变换原点 (Transform Origin)	设置变换的原点。	origin-center、origin-top-right、origin-bottom

交互式变换示例

此示例演示了如何组合多个变换功能类，并在悬停时应用它们以创建引人入胜的效果。请注意使用 transform 来启用变换，以及使用 transition-transform 来平滑地动画化这些变化。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind Transforms</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-900 min-h-screen flex justify-center items-center p-4">

  <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-white font-bold">

    <!-- Scale Effect -->
    <div class="transform hover:scale-110 transition-transform duration-300 w-32 h-32 bg-blue-500 rounded-lg flex items-center justify-center">
      悬停：缩放
    </div>

    <!-- Rotate Effect -->
    <div class="transform hover:rotate-12 transition-transform duration-300 w-32 h-32 bg-emerald-500 rounded-lg flex items-center justify-center">
      悬停：旋转
    </div>

    <!-- Translate Effect -->
    <div class="transform hover:-translate-y-3 transition-transform duration-300 w-32 h-32 bg-rose-500 rounded-lg flex items-center justify-center">
      悬停：平移
    </div>

    <!-- Combined Effect -->
    <div class="transform hover:scale-125 hover:rotate-6 transition-transform duration-300 w-32 h-32 bg-violet-500 rounded-lg flex items-center justify-center">
      悬停：全部
    </div>

  </div>

</body>
</html>

设置变换原点

默认情况下，变换从元素的中心开始。你可以使用 origin-* 功能类更改此枢轴点。这对于创建有趣的旋转效果特别有用，例如卡片从其角落翻转。

<div class="flex justify-center items-center space-x-12 mt-12">
  <!-- Default origin (center) -->
  <div class="transform hover:rotate-45 transition-transform duration-300 w-24 h-24 bg-cyan-500 rounded"></div>

  <!-- Origin top-left -->
  <div class="transform origin-top-left hover:rotate-45 transition-transform duration-300 w-24 h-24 bg-cyan-500 rounded"></div>

  <!-- Origin bottom-right -->
  <div class="transform origin-bottom-right hover:rotate-45 transition-transform duration-300 w-24 h-24 bg-cyan-500 rounded"></div>
</div>

硬件加速实现更平滑的动画

对于涉及变换和不透明度（opacity）的动画，你可以向浏览器提示使用硬件加速，以获得更平滑、更少卡顿的结果。Tailwind 为此提供了 transform-gpu 功能类。它添加了一个简单的 transform: translateZ(0) 来将元素提升到自己的 GPU 层。

<!-- This animation may be smoother, especially on complex pages -->
<div class="transform-gpu hover:scale-110 transition-transform duration-300 ...">
  我已启用硬件加速
</div>

当你的动画需要尽可能流畅时，可以将 transform-gpu 或 transform-3d 作为基础类与 transform 一起使用。但是，不要将其添加到每个元素，因为过度使用可能会消耗更多内存。