源本科技 | 码上会

logo
源本科技 码上会
一站式数字化转型技能学习平台

Tailwind CSS 变换系统

2026/03/12
10
0

学习目标

  • 掌握 缩放 (Scale) 技术，实现元素的放大强调与响应式适配，理解单轴缩放的视觉效果。

  • 熟练运用 旋转 (Rotate) 类名制作图标转向、加载动画及装饰性元素。

  • 学会使用 位移 (Translate) 进行微调布局、创建悬停浮动效果及实现完全隐藏 / 显示动画。

  • 理解 倾斜 (Skew) 在创造动态感和现代设计风格中的应用。

  • 掌握 变换原点 (Transform Origin) 的控制，改变旋转和缩放的基准点，实现更复杂的物理运动效果。

  • 能够结合 transition 属性，让所有变换操作平滑自然。

缩放控制

缩放不仅改变元素大小，还常用于交互反馈（如按钮点击）和视觉强调。默认情况下，缩放以元素中心为原点。

均匀缩放

  • scale-0: 完全缩小至不可见（常配合 opacity 做消失动画）。

  • scale-50, scale-75: 缩小至 50% 或 75%。

  • scale-100: 恢复原始大小（默认值）。

  • scale-105, scale-110, scale-125, scale-150: 放大 5% 到 50%，常用于 hover 状态。

单轴缩放

  • scale-x-{value}: 仅在水平方向缩放。

  • scale-y-{value}: 仅在垂直方向缩放。

  • 应用场景: 制作进度条加载效果、特殊的拉伸变形文字或镜像翻转（scale-x-[-1]）。

代码示例

交互式卡片与镜像翻转

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Tailwind Auto Cols 对比演示</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
    <div class="p-8 bg-gray-50 space-y-8">

        <!-- 场景 1: 悬停放大效果 -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div
                class="group bg-white p-6 rounded-xl shadow-md cursor-pointer transition-all duration-300 ease-out hover:shadow-xl hover:scale-105">
                <div
                    class="h-12 w-12 bg-blue-100 rounded-lg flex items-center justify-center text-blue-600 mb-4 group-hover:scale-110 transition-transform duration-300">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                    </svg>
                </div>
                <h3 class="font-bold text-lg mb-2">快速启动</h3>
                <p class="text-gray-600 text-sm">鼠标悬停时，整个卡片和图标都会轻微放大，产生浮起感。</p>
            </div>

            <!-- 场景 2: 点击收缩反馈 -->
            <button
                class="px-6 py-3 bg-indigo-600 text-white font-bold rounded-lg shadow active:scale-95 transition-transform duration-100">
                点击我 (active:scale-95)
            </button>

            <!-- 场景 3: 水平镜像翻转 -->
            <div class="flex items-center space-x-4 border p-4 rounded bg-white">
                <span class="text-sm text-gray-500">正常箭头:</span>
                <svg class="w-6 h-6 text-gray-800" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3">
                    </path>
                </svg>

                <span class="text-sm text-gray-500">镜像箭头 (scale-x-[-1]):</span>
                <svg class="w-6 h-6 text-gray-800 scale-x-[-1]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3">
                    </path>
                </svg>
            </div>
        </div>

    </div>
</body>

</html>

旋转控制

旋转用于调整图标方向、创建加载 spinner 或增加设计的动感。

核心类名

  • rotate-0: 重置旋转。

  • rotate-45, rotate-90, rotate-180: 顺时针旋转。

  • -rotate-45, -rotate-90, -rotate-180: 逆时针旋转。

  • 任意角度: rotate-[25deg] (Tailwind v3+ 支持任意值)。

代码示例

手风琴菜单与方向指示

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Tailwind Auto Cols 对比演示</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
    <div class="p-8 bg-white rounded-xl shadow space-y-6">

        <!-- 场景 1: 手风琴箭头旋转 -->
        <div class="space-y-2 max-w-md">
            <details class="group border rounded-lg overflow-hidden">
                <summary class="flex items-center justify-between p-4 bg-gray-50 cursor-pointer list-none">
                    <span class="font-medium text-gray-700">什么是 Tailwind CSS？</span>
                    <!-- 箭头：默认 rotate-0，打开时 rotate-180 -->
                    <svg class="w-5 h-5 text-gray-500 transition-transform duration-300 group-open:rotate-180"
                        fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                    </svg>
                </summary>
                <div class="p-4 text-gray-600 text-sm bg-white">
                    Tailwind CSS 是一个实用优先的 CSS 框架，旨在快速构建自定义用户界面。
                </div>
            </details>

            <details class="group border rounded-lg overflow-hidden">
                <summary class="flex items-center justify-between p-4 bg-gray-50 cursor-pointer list-none">
                    <span class="font-medium text-gray-700">它容易学习吗？</span>
                    <svg class="w-5 h-5 text-gray-500 transition-transform duration-300 group-open:rotate-180"
                        fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                    </svg>
                </summary>
                <div class="p-4 text-gray-600 text-sm bg-white">
                    非常容易！只要熟悉 HTML 类名即可，无需记忆复杂的 CSS 选择器。
                </div>
            </details>
        </div>

        <!-- 场景 2: 装饰性旋转网格 -->
        <div class="grid grid-cols-4 gap-4 max-w-xs mx-auto">
            <div class="h-12 bg-blue-500 rounded rotate-0"></div>
            <div class="h-12 bg-blue-500 rounded rotate-45"></div>
            <div class="h-12 bg-blue-500 rounded rotate-90"></div>
            <div class="h-12 bg-blue-500 rounded rotate-[30deg]"></div>
        </div>
        <p class="text-center text-xs text-gray-400 mt-2">支持任意角度 rotate-[30deg]</p>

    </div>
</body>

</html>

位移控制

位移（Translate）用于在不改变文档流的情况下移动元素位置，是实现动画（如滑入、滑出）的核心。

核心类名

  • translate-x-0, translate-y-0: 重置位置。

  • translate-x-{step}, translate-y-{step}: 基于 spacing 尺度移动（如 translate-x-4 = 1rem）。

  • translate-x-full, translate-y-full: 移动 100% 自身宽度 / 高度（常用于将元素移出屏幕）。

  • -translate-x-full: 向左移动 100%。

  • 任意值: translate-x-[50px], translate-y-[10%].

代码示例

侧边栏抽屉与悬浮提示

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Tailwind Auto Cols 对比演示</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
    <div class="p-8 bg-gray-100 min-h-[400px] relative overflow-hidden rounded-xl">

        <!-- 场景 1: 侧边栏抽屉 (Mobile Drawer) -->
        <!-- 模拟：默认隐藏在左侧屏幕外 (-translate-x-full)，实际项目中由 JS 控制移除该类 -->
        <div
            class="absolute top-0 left-0 h-full w-64 bg-white shadow-2xl transform -translate-x-full transition-transform duration-300 ease-out z-20 flex flex-col">
            <div class="p-4 bg-gray-50 border-b font-bold">导航菜单</div>
            <div class="p-4 space-y-2">
                <a href="#" class="block p-2 hover:bg-gray-100 rounded">首页</a>
                <a href="#" class="block p-2 hover:bg-gray-100 rounded">产品</a>
                <a href="#" class="block p-2 hover:bg-gray-100 rounded">关于</a>
            </div>
        </div>

        <!-- 模拟触发按钮 (仅演示用，实际需 JS) -->
        <div class="absolute top-4 left-4 z-30">
            <button class="px-4 py-2 bg-gray-800 text-white rounded shadow hover:bg-gray-700"
                onclick="alert('实际项目中，点击此按钮应移除侧边栏的 -translate-x-full 类名')">
                打开侧边栏 (模拟)
            </button>
            <p class="text-xs text-gray-500 mt-2 max-w-[200px]">
                侧边栏当前处于 <code>-translate-x-full</code> 状态，隐藏在视图左侧。
            </p>
        </div>

        <!-- 场景 2: 悬浮提示 (Tooltip) -->
        <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 group">
            <button class="px-4 py-2 bg-blue-600 text-white rounded shadow">
                悬停查看提示
            </button>
            <!-- 提示框：默认向下位移并透明，悬停时复位 -->
            <div
                class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1 bg-gray-800 text-white text-xs rounded opacity-0 translate-y-2 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 whitespace-nowrap pointer-events-none">
                这是一个纯 CSS 实现的 Tooltip
                <!-- 小三角 -->
                <div class="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-800">
                </div>
            </div>
        </div>

    </div>
</body>

</html>

倾斜与变换原点

倾斜

使元素在 X 轴或 Y 轴上发生形变，创造速度感和现代感。

  • skew-x-12, skew-y-12: 倾斜 12 度。

  • -skew-x-6: 反向倾斜。

  • 应用: 促销标签、科技感背景块、平行四边形按钮。

变换原点

定义旋转、缩放和倾斜的基准点。默认为中心 (origin-center)。

  • origin-top-left, origin-top-right: 左上 / 右上角。

  • origin-bottom, origin-left: 底部 / 左侧中心。

  • 应用: 门开关效果（origin-left + rotate-y）、扇形展开菜单。

代码示例

科技感卡片与开门动画

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>Tailwind Auto Cols 对比演示</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 p-8">

        <!-- 场景 1: 倾斜设计的促销标签 -->
        <div class="relative w-64 h-40 bg-gray-200 rounded-lg overflow-hidden flex items-center justify-center">
            <div
                class="absolute top-8 -right-12 w-48 h-12 bg-red-600 text-white font-bold text-center leading-[3rem] skew-x-[-20deg] shadow-lg z-10">
                HOT SALE
            </div>
            <p class="text-gray-500">背景容器</p>
        </div>

        <!-- 场景 2: 变换原点演示 (开门效果) -->
        <div class="flex items-center justify-center space-x-12">

            <!-- 默认中心旋转 -->
            <div class="group perspective">
                <div
                    class="w-24 h-24 bg-blue-500 rounded-lg flex items-center justify-center text-white font-bold shadow-lg transition-transform duration-700 group-hover:rotate-12 origin-center cursor-pointer">
                    中心旋转
                </div>
                <p class="text-xs text-center mt-2 text-gray-500">origin-center (默认)</p>
            </div>

            <!-- 左侧原点旋转 (像开门) -->
            <div class="group perspective">
                <div
                    class="w-24 h-24 bg-green-500 rounded-lg flex items-center justify-center text-white font-bold shadow-lg transition-transform duration-700 group-hover:rotate-12 origin-left cursor-pointer">
                    左侧旋转
                </div>
                <p class="text-xs text-center mt-2 text-gray-500">origin-left</p>
            </div>

            <!-- 顶部原点旋转 (像翻盖) -->
            <div class="group perspective">
                <div
                    class="w-24 h-24 bg-purple-500 rounded-lg flex items-center justify-center text-white font-bold shadow-lg transition-transform duration-700 group-hover:rotate-12 origin-top cursor-pointer">
                    顶部旋转
                </div>
                <p class="text-xs text-center mt-2 text-gray-500">origin-top</p>
            </div>

        </div>

    </div>
</body>

</html>