Tailwind CSS - 倾斜

使用 Skew 变换创建动态形状

Skew（倾斜）工具类是 Tailwind transform（变换）系列的一部分，它允许你沿着元素的水平轴（X 轴）或垂直轴（Y 轴）倾斜元素。这是一个强大的工具，用于创建非矩形的动态设计和独特的悬停效果。

Skew 工具类

将这些类应用于元素以对其进行倾斜。将它们与 transition（过渡）工具类结合使用，可以在悬停或其它状态下实现平滑的动画效果。

类	CSS 属性
skew-x-0	transform: skewX(0deg);
skew-y-0	transform: skewY(0deg);
skew-x-1	transform: skewX(1deg);
skew-y-1	transform: skewY(1deg);
skew-x-3	transform: skewX(3deg);
skew-y-3	transform: skewY(3deg);
skew-x-6	transform: skewX(6deg);
skew-y-6	transform: skewY(6deg);
skew-x-12	transform: skewX(12deg);
skew-y-12	transform: skewY(12deg);

示例：交互式悬停效果

Skew 的一个常见用途是为交互式元素添加动态感。通过在悬停时应用倾斜，你可以创建引人入胜且令人难忘的用户体验。请记住添加 transition（过渡）工具类以实现平滑效果。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Skew Hover Effects</title>
</head>
<body class="bg-slate-900 text-white flex justify-center items-center h-screen">
  <div class="flex gap-8">
    <!-- 鼠标悬停时水平倾斜 -->
    <div class="w-40 h-40 bg-violet-600 flex items-center justify-center rounded-lg shadow-lg
                transition duration-300 ease-in-out hover:skew-x-12 hover:scale-110">
      <span class="font-bold">Hover Me</span>
    </div>

    <!-- 鼠标悬停时垂直倾斜 -->
    <div class="w-40 h-40 bg-emerald-500 flex items-center justify-center rounded-lg shadow-lg
                transition duration-300 ease-in-out hover:-skew-y-12 hover:scale-110">
      <span class="font-bold">Hover Me</span>
    </div>
  </div>
</body>
</html>

实际应用：风格化横幅

Skew 变换不仅适用于动画。你还可以使用它们来创建静态、风格化的形状，例如倾斜的横幅或部分分隔符。请注意，倾斜元素也会扭曲其内容，这可能是所需效果的一部分。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Stylized Banner</title>
</head>
<body class="bg-gray-100 p-8">
  <div class="bg-red-500 w-max py-4 px-10 -skew-x-12 rounded-md shadow-lg">
    <p class="text-white font-extrabold text-2xl skew-x-12">
      SALE!
    </p>
  </div>
  <p class="mt-4 text-gray-600">这里，我们对容器应用负向倾斜，对内容应用相反的正向倾斜，以保持文本竖直。</p>
</body>
</html>

现代特性与最佳实践

• 任意值： 没有找到你需要的确切角度？Tailwind 的 JIT（即时）引擎允许你直接在类名中使用任何值。例如：class="skew-x-[15deg]" 或 class="-skew-y-[8deg]"。
• 硬件加速： Tailwind 的所有 transform（变换）工具类（包括 skew、scale、rotate、translate）在现代浏览器中都会自动进行硬件加速，确保你的动画流畅且高性能。
• 内容扭曲： 请注意，倾斜会扭曲元素内部的所有内容，包括文本和图像。这可能会影响可读性。对于大幅度的倾斜，最好将其用于装饰性元素或内容较少或也进行过变换以进行补偿的容器。