自学教程

Tailwind CSS 变换

Tailwind CSS 教程

Tailwind CSS V4 变换（Transforms）完整教程 + 可运行 Demo

前言

Transform 变换是前端开发中非常常用的样式能力，用来对元素进行位移、缩放、旋转、倾斜、透视等几何形变。Tailwind CSS V4 对 transform 底层做了优化，默认会使用 GPU 加速渲染，配合前面学习的 transition 过渡，能轻松实现流畅的交互动效。

和 V3 相比，V4 的变换工具类基础用法大体一致，但在底层解析、任意值语法、和 @theme 自定义变换的写法上遵循 V4 新规范；同时变换类可以和 @starting-style、hover、active、focus 等变体自由组合，非常适合做卡片悬浮、按钮按压、弹窗缩放等场景。

提示：transform 变换不会改变文档流布局，元素原本占据的空间不会被挤压或撑开，这是 transform 的核心特点。

一、五大基础变换能力

1. 位移 translate

控制元素在 X（水平）、Y（垂直）方向移动。

  • translate-x-*：水平方向移动，正数向右，负数向左
  • translate-y-*：垂直方向移动，正数向下，负数向上

常用预设：translate-x-0、translate-x-1、translate-x-2、translate-x-4、translate-x-8；负数示例：-translate-y-1（向上偏移）

支持任意值方括号语法（V4）：translate-x-[10px]、translate-y-[2rem]

2. 缩放 scale

放大缩小元素，支持 X、Y 轴单独缩放，也可以整体缩放。

  • scale-*：整体等比例缩放
  • scale-x-*：仅水平缩放
  • scale-y-*：仅垂直缩放

常用预设：scale-50（0.5倍）、scale-95、scale-100（原始大小）、scale-105、scale-110

业务高频场景：按钮 hover:scale-105，点击 active:scale-95

3. 旋转 rotate

旋转元素，单位角度 deg。正数顺时针，负数逆时针。
rotate-0、rotate-45、rotate-90、rotate-180；负数：-rotate-12
自定义角度：rotate-[15deg]

4. 倾斜 skew

斜切扭曲元素，分为 X 轴倾斜、Y轴倾斜

  • skew-x-*：水平方向倾斜
  • skew-y-*：垂直方向倾斜

示例：skew-x-12、skew-y-6

5. 透视 perspective

开启3D透视效果，给子元素营造3D空间，配合 rotateX / rotateY 使用。
perspective-* 用来设置透视距离，值越小透视效果越强。

二、变换组合使用

多个变换可以叠加在同一个元素上，直接并列写工具类即可，不需要像原生CSS那样手动写 transform: translate() scale() rotate()。
示例：

<div class="translate-x-2 scale-105 rotate-3">
  同时位移+放大+旋转
</div>

三、配合过渡 transition（重点）

变换类属于 GPU 加速属性，推荐搭配 transition-transform，只监听transform属性变化，性能远优于 transition-all。

<div class="transition-transform duration-300 hover:scale-105 hover:-translate-y-1">
  悬浮放大上移
</div>

四、V4 自定义变换（@theme 写法）

V4 自定义变换不再使用 JS 配置，统一在 <style type="text/tailwindcss"> 内用 @theme 注册。

<style type="text/tailwindcss">
@theme {
  --transform-custom-tilt: skewX(-6deg) rotateY(8deg);
}
</style>
<div class="transform-custom-tilt">自定义变换</div>

五、常见业务场景示例

  1. 卡片悬浮抬升
<div class="transition-transform duration-300 hover:-translate-y-1 hover:scale-[1.02]">
卡片
</div>
  1. 按钮按压效果
<button class="transition-transform duration-200 hover:scale-105 active:scale-95">
点击按钮
</button>
  1. 小图标旋转展开
<div class="transition-transform duration-300 group-hover:rotate-180">↓</div>

六、避坑指南

  1. transform 不会改变页面布局，元素原有占位保持不变；如果需要改变布局，不要使用transform。
  2. 多个变换直接并列写类名，V4 会自动合并到同一个 transform 属性，不会冲突。
  3. 做动画时，transform 优先搭配 transition-transform，性能更好，减少浏览器重绘开销。
  4. 3D旋转（rotateX / rotateY）需要搭配 perspective-* 透视，否则看不出3D效果。
  5. 任意值语法 scale-[1.2]、translate-x-[20px] V4 原生支持，调试非常方便。

七、完整可运行 Demo（Tailwind CSS V4）

实例

Run this code »
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CSS V4 Transforms Demo</title>
  <!-- V4 Play CDN -->
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  <style type="text/tailwindcss">
    @theme {
      --transform-tilt-card: skewX(-3deg) rotateY(5deg);
    }
  </style>
</head>
<body class="p-10 bg-slate-100 space-y-8">
  <h1 class="text-3xl font-bold text-slate-800">Tailwind CSS V4 Transform 变换演示</h1>

  <!-- 1. 位移 translate 悬浮上移 -->
  <div class="p-6 bg-white rounded-xl shadow-md transition-transform duration-300 hover:-translate-y-2">
    悬浮向上位移 -translate-y-2
  </div>

  <!-- 2. 缩放 scale 按钮交互 -->
  <button class="px-8 py-3 bg-blue-500 text-white rounded-lg transition-transform duration-200 hover:scale-105 active:scale-95">
    hover放大，点击按压缩小
  </button>

  <!-- 3. 旋转 rotate -->
  <div class="w-24 h-24 bg-emerald-500 rounded-lg transition-transform duration-500 hover:rotate-45 flex items-center justify-center text-white">
    hover旋转45度
  </div>

  <!-- 4. 倾斜 skew -->
  <div class="p-4 bg-amber-500 text-white skew-x-3 w-fit">
    skew-x-3 X轴倾斜
  </div>

  <!-- 5. 多个变换叠加 -->
  <div class="p-6 bg-white rounded-xl shadow-md transition-transform duration-300 hover:scale-105 hover:-translate-y-1 hover:rotate-1">
    组合变换：缩放 + 位移 + 轻微旋转
  </div>

  <!-- 6. V4 @theme 自定义变换 -->
  <div class="p-6 bg-indigo-500 text-white rounded-xl transform-tilt-card w-fit">
    @theme 自定义倾斜变换
  </div>

  <!-- 7. 任意值语法自定义变换 -->
  <div class="p-4 bg-rose-500 text-white rounded-lg transition-transform duration-300 hover:scale-[1.15] hover:translate-x-[8px]">
    方括号任意值：scale-[1.15] translate-x-[8px]
  </div>

  <!-- 8. 3D透视+旋转 -->
  <div class="perspective-500">
    <div class="p-6 bg-cyan-500 text-white rounded-xl transition-transform duration-500 hover:rotate-y-12 w-fit">
      3D透视 + Y轴旋转（hover查看）
    </div>
  </div>

</body>
</html>

全文总结

Tailwind CSS V4 的 Transform 变换工具类，可以快速实现位移、缩放、旋转、倾斜、透视等几何形变。配合 transition-transform 过渡，能做出高性能的交互动效。多个变换直接叠加类名即可，V4 支持方括号任意值语法，自定义变换使用 @theme 注册变量，无需修改JS配置。开发时记住：transform 只改变视觉渲染，不影响文档流布局，做动画优先选用 transform。

Tailwind CSS V4 Transform 变换 速查表

说明：适用于 Tailwind CSS v4，支持 Play CDN / NPM 工程；可和 hover / active / focus / @starting-style 变体组合；搭配 transition-transform 实现高性能动画。
核心特性：transform 只改变视觉形态，不会改动文档流布局，GPU加速，动画性能优秀。

一、基础变换工具类

1. 位移 translate

工具类作用
translate-x-{num}X轴水平位移，正数向右
-translate-x-{num}X轴向左位移
translate-y-{num}Y轴垂直位移，正数向下
-translate-y-{num}Y轴向上位移

常用预设：translate-x-0、translate-x-1、translate-x-2、translate-x-4、translate-x-8
任意值语法：translate-x-[20px]、translate-y-[1.5rem]

2. 缩放 scale

工具类作用
scale-{num}X、Y轴整体等比例缩放
scale-x-{num}仅水平缩放
scale-y-{num}仅垂直缩放

常用预设：scale-50(0.5倍)、scale-95、scale-100(原始大小)、scale-105、scale-110
任意值语法：scale-[1.15]

3. 旋转 rotate

工具类作用
rotate-{num}平面旋转，正数顺时针
-rotate-{num}逆时针旋转
rotate-x-{num}绕X轴3D旋转
rotate-y-{num}绕Y轴3D旋转

常用预设：rotate-0、rotate-45、rotate-90、rotate-180
任意值语法：rotate-[15deg]

4. 倾斜 skew

工具类作用
skew-x-{num}X轴水平斜切扭曲
skew-y-{num}Y轴垂直斜切扭曲

常用预设：skew-x-6、skew-x-12、skew-y-3
任意值语法：skew-x-[8deg]

5. 透视 perspective（3D效果必备）

工具类作用
perspective-{num}设置透视距离，加在父元素，开启子元素3D空间

值越小透视效果越强，例：perspective-500

二、组合使用规则

多个变换直接并列写类名，V4会自动合并到同一个 transform 属性，不需要手动写原生CSS transform。

<!-- 位移+缩放+旋转 组合示例 -->
<div class="-translate-y-1 scale-105 rotate-1">内容</div>

三、搭配过渡（推荐高性能写法）

优先使用 transition-transform，只监听transform属性变化，相比transition-all大幅减少性能开销

<div class="transition-transform duration-300 hover:-translate-y-1 hover:scale-105">
  悬浮卡片
</div>

四、V4 自定义变换（@theme 标准语法）

V4不再直接在@theme写CSS类，通过--transform-xxx变量注册

<style type="text/tailwindcss">
@theme {
  /* 自定义变换，变量名必须以 --transform- 开头 */
  --transform-tilt-card: skewX(-3deg) rotateY(5deg);
}
</style>
<!-- 使用 -->
<div class="transform-tilt-card">倾斜卡片</div>

五、高频业务代码片段（直接复制使用）

<!-- 1. 卡片悬浮抬升 -->
<div class="transition-transform duration-300 hover:-translate-y-2 hover:scale-[1.02]">
  卡片
</div><!-- 2. 按钮按压交互 -->
<button class="transition-transform duration-200 hover:scale-105 active:scale-95">
  按钮
</button>
<!-- 3. 图标旋转展开（配合group） -->
<div class="group">
  <span class="transition-transform duration-300 group-hover:rotate-180">▼</span>
</div>
<!-- 4. 3D旋转卡片 -->
<div class="perspective-500">
  <div class="transition-transform duration-500 hover:rotate-y-12">
    3D翻转
  </div>
</div>
<!-- 5. 方括号任意值自定义变换 -->
<div class="transition-transform duration-300 hover:scale-[1.15] hover:translate-x-[8px]">
  自定义数值变换
</div>

六、避坑清单

  1. transform 只改变视觉，不会改变元素原始占位大小，需要布局位移不要用transform。
  2. 3D旋转 rotate-x / rotate-y 必须在父元素添加 perspective-*，否则看不到3D透视效果。
  3. 动画场景，优先搭配 transition-transform，禁止无脑使用 transition-all，避免性能损耗。
  4. 多个变换直接叠加类名，V4自动合并，不会互相覆盖。
  5. 自定义变换必须使用 --transform-xxx 变量在@theme内注册，V4不支持旧版直接写class的写法。
  6. 任意值方括号语法 scale-[1.2]、translate-x-[20px] V4原生支持，适合临时调试。

七、速记口诀

位移缩放旋转斜切，transform只改视觉；
动画优先transition-transform，GPU加速性能佳；
多变换直接叠加类，自定义变换theme注册。

标签：

0 条笔记