CSS 变换生成器

什么是 CSS transform 属性？

CSS transform 属性允许您旋转、缩放、倾斜或平移元素而不影响周围布局。它是创建交互式和动画 UI 最强大的工具之一，因为变换是 GPU 加速的，不会触发页面重新布局。这使得它们非常适合悬停效果、过渡和动画，这些场景需要流畅的 60fps 性能。

变换修改元素的视觉渲染，同时其原始盒模型位置保持不变。其他元素的表现就像变换后的元素仍在原始位置，这就是为什么变换非常适合不应推动内容的效果。

变换函数详解

CSS 提供多种变换函数。每个函数控制元素变换的不同方面。本工具支持最常用的 2D 变换函数：

您可以在单个 transform 声明中组合多个函数，它们按编写顺序应用：transform: rotate(15deg) scale(1.2); 先旋转，再缩放。

2D 与 3D 变换

CSS 同时支持 2D 和 3D 变换。本工具专注于 2D 变换，它涵盖了绝大多数日常 UI 需求。3D 变换增加了 Z 轴，使用 rotateX、rotateY、perspective 和 translateZ 等函数，可以实现翻牌效果和 3D 轮播。但是，3D 变换需要在父元素上设置 perspective 属性才能正确显示，且更难微调。

对于大多数项目 — 悬停效果、卡片动画、图标旋转和布局调整 — 2D 变换已足够且更易管理。从 2D 开始，只在真正需要深度时才使用 3D。

何时使用 CSS 变换

CSS 变换在现代网页设计中无处不在。常见用例包括：悬停时旋转图标以表示交互性，悬停时略微缩放按钮或卡片以提供触感，倾斜横幅或英雄区域以获得动态角度，将下拉菜单或工具提示平移到视图中，以及构建元素在页面加载时滑入或淡入位置的入场动画。

因为变换不影响布局，它们是动画元素位置和尺寸的推荐方式。动画 top、left、width 或 height 等属性会在每一帧触发重新布局，开销大得多。transform 和 opacity 是唯一可以完全在 GPU 上动画的两个属性。

如何生成 CSS 变换

本工具让您可视化设计变换效果：调整每个滑块以设置旋转、缩放、X 轴倾斜、Y 轴倾斜、X 轴位移和 Y 轴位移值。预览实时更新，让您看到组合效果，CSS 代码自动生成。点击"复制 CSS"获取代码并粘贴到样式表。

所有操作都在浏览器中本地运行 — 不会向任何服务器发送数据，您的设计选择完全私密。