Tailwind CSS - 变形原点

Tailwind CSS 现代指南：变换原点

本指南介绍如何使用 Tailwind 的 transform-origin 功能类。这些类设置了元素变换（如旋转、缩放和倾斜）的原点，从而实现更具创意和可控性的动画。

理解变换原点

默认情况下，像 rotate 和 scale 这样的变换会从元素的中心开始。transform-origin 属性允许你更改这个枢轴点。你可以把它想象成在旋转一张纸之前，先在纸上插入一个图钉——纸会围绕着图钉旋转。

核心变换原点功能类

Tailwind 为所有标准原点提供了类：

类名	CSS 属性
`origin-center`	`transform-origin: center;`
`origin-top`	`transform-origin: top;`
`origin-top-right`	`transform-origin: top right;`
`origin-right`	`transform-origin: right;`
`origin-bottom-right`	`transform-origin: bottom right;`
`origin-bottom`	`transform-origin: bottom;`
`origin-bottom-left`	`transform-origin: bottom left;`
`origin-left`	`transform-origin: left;`
`origin-top-left`	`transform-origin: top left;`

交互式示例：原点的力量

以下示例演示了不同的 origin-* 类如何影响 rotate 和 scale 变换。将鼠标悬停在每个卡片上，查看变换效果。还添加了 transition 功能类以平滑动画效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind Transform Origin Example</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-900 text-white p-8">
    <h1 class="text-3xl font-bold text-center mb-10">交互式变换原点演示</h1>
    <p class="text-center text-slate-400 mb-12">将鼠标悬停在元素上，查看它们从不同原点变换的效果。</p>

    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-16">
        <!-- Origin Top-Left -->
        <div class="relative h-28 w-28 mx-auto">
            <div class="absolute inset-0 bg-violet-500 rounded-lg transition-transform duration-300 origin-top-left hover:rotate-12 hover:scale-125"></div>
            <span class="absolute inset-0 flex items-center justify-center font-mono">origin-top-left</span>
        </div>

        <!-- Origin Top -->
        <div class="relative h-28 w-28 mx-auto">
            <div class="absolute inset-0 bg-violet-500 rounded-lg transition-transform duration-300 origin-top hover:rotate-12 hover:scale-125"></div>
            <span class="absolute inset-0 flex items-center justify-center font-mono">origin-top</span>
        </div>

        <!-- Origin Top-Right -->
        <div class="relative h-28 w-28 mx-auto">
            <div class="absolute inset-0 bg-violet-500 rounded-lg transition-transform duration-300 origin-top-right hover:rotate-12 hover:scale-125"></div>
            <span class="absolute inset-0 flex items-center justify-center font-mono">origin-top-right</span>
        </div>

        <!-- Origin Left -->
        <div class="relative h-28 w-28 mx-auto">
            <div class="absolute inset-0 bg-pink-500 rounded-lg transition-transform duration-300 origin-left hover:rotate-12 hover:scale-125"></div>
            <span class="absolute inset-0 flex items-center justify-center font-mono">origin-left</span>
        </div>

        <!-- Origin Center (Default) -->
        <div class="relative h-28 w-28 mx-auto">
            <div class="absolute inset-0 bg-pink-500 rounded-lg transition-transform duration-300 origin-center hover:rotate-12 hover:scale-125"></div>
            <span class="absolute inset-0 flex items-center justify-center font-mono">origin-center</span>
        </div>

        <!-- Origin Right -->
        <div class="relative h-28 w-28 mx-auto">
            <div class="absolute inset-0 bg-pink-500 rounded-lg transition-transform duration-300 origin-right hover:rotate-12 hover:scale-125"></div>
            <span class="absolute inset-0 flex items-center justify-center font-mono">origin-right</span>
        </div>
    </div>
</body>
</html>

最佳实践与实际应用

UI 动画：使用 origin-top-right 或 origin-top-left 可以让下拉菜单看起来像是从其触发按钮展开的。
图标效果：图标可以从 origin-bottom 缩放，以创建“弹出”效果。
组合变换：transform-origin 必须与 scale-*、rotate-* 或 skew-* 等变换功能类一起使用才能有任何可见效果。始终添加 transition 类以平滑地动画化这些变化。
任意值：借助 Tailwind 的 JIT 引擎，你可以指定自定义原点，例如 origin-[25%_75%]。这是用于精确控制的高级功能。

常见陷阱

缺少变换功能类：单独应用 origin-* 类没有任何作用。它仅为其他变换设置舞台。
没有 transform 基础类：在旧版本的 Tailwind 中，你需要一个 transform 类。现在，当你使用任何变换功能类时，它默认启用，所以这已经不是什么大问题了，但了解一下也无妨。