CSS transform 生成器,rotate/scale/skew/translate (含 3D) 实时预览,一键复制 CSS,12 个预设组合。
- 本地处理
- 分类 颜色设计
- 适合 把视觉想法转成可复用的颜色值。
transform: perspective(800px) rotate(12deg) scale(1.05);
这个工具能做什么
可视化的 CSS `transform` 生成器,覆盖全部 2D 通道(rotate、scale、 skewX/skewY、translateX/translateY)和完整 3D 通道(rotateX/Y/Z、 scaleX/scaleY、translateZ、perspective)。`transform-origin` 既能从 九宫格里点选,也能直接填 `25% 75%` 这种自定义值。`transition` 的时长 和缓动函数可调,改完点 Play 让预览框重放一次动画。预览用的就是同一段 CSS,所见即所得,不存在"预览和实际不一致"。内置 12 个真正能用到产品里 的预设:卡片翻转、上下翻转、心跳放大、缩小按下、原地旋转、左右摇摆、 向上弹跳、向右滑入、3D 倾斜、向上抬起、斜切标签、等距视角。两种输出 模式可切:只复制 `transform: ...;` 那一句塞进现有规则,或者复制完整的 `.box { ... }` 代码块,`transform-origin` 和 `transition` 都帮你接好。 合成器会跳过没动的通道(不会塞一句 `rotate(0deg)` 进去添堵),并且 用更短的写法,等比例缩放给 `scale(1.5)` 而不是 `scale(1.5, 1.5)`, 只动 X 轴的斜切给 `skewX(12deg)` 而不是 `skew(12deg, 0)`,代码塞进 review 也清爽。100% 浏览器本地运行,没有上传,没有注册,你调的参数 不会被记录。配 hover / focus / modal 入场动画特别合适,毕竟动画的 "感觉"一半靠几何,一半靠缓动函数。
工具细节
- 输入
- 文本 + 数值 + 结构化内容
- 页面会根据工具类型展示文本框、数值控件、文件选择或结构化输入。
- 输出
- 即时结果 + 复制 + 预览
- 结果区优先给出可操作结果，支持项会显示复制、下载或可视化预览。
- 隐私
- 浏览器本地处理
- 主工具逻辑未发现外部 API 调用，输入通常留在当前标签页内处理。
- 保存 / 分享
- 免账号使用
- 打开页面即可使用；刷新后是否保留结果取决于具体工具。
- 性能预算
- 首屏 JS ≤ 22 KB
- 没有声明 WASM 依赖，适合快速打开和移动端使用。
- 适用场景
- 颜色设计 · 设计师
- 分类和职业标签用于推荐相关工具、组织内链，并帮助用户快速判断是否适合当前任务。
怎么用
-
1. 输入
把内容粘贴或拖入工具面板。
-
2. 处理
点击按钮,在浏览器内本地处理,文件不上传。
-
3. 复制 / 下载
一键复制结果或下载到本地。
CSS transform 生成器 适合怎么用
适合在真实界面工作中选色、查色、转色值或整理配色。
适合颜色任务
- 把视觉想法转成可复用的颜色值。
- 界面上线前检查对比度和可访问性。
- 让品牌、设计和前端实现的颜色决策对齐。
颜色检查项
- 对比度要按真实背景检查,不要只看色块。
- 有深浅主题时,两套都要单独看。
- 复制设计系统或代码库真正需要的格式。
下一步可以接着做
这些入口会把当前任务接到更完整的工具链里。
真实使用场景
做一个不会显扁的卡片翻转 hover
你在写一个 280px 的商品卡,hover 时翻面露出参数。直接套 card-flip 预设,看到它需要 perspective(800px) 加 rotateY(180deg),复制整段 .box 代码块。要是没这工具,你大概率会忘了加 perspective,翻出来 是个压扁的矩形,再花 20 分钟查为什么 3D 看着像 2D。
调一个按下去有手感的按钮
主按钮需要一个 :active 态,按下去要像真的按下去。你设 scale(0.96)、 transition 0.12s ease-out,重放五次直到那一下"咔哒"对味,再把 transform 那一句复制进现有的 .btn:active 规则。0.96 是按下,0.90 看着像坏了,实时预览省掉来回试的功夫。
让入场动画严丝合缝对上设计稿
Figma 交付标注写着"从右边滑入 24px,0.35s,ease-out"。你在静止态 设 translateX(24px)、transition 0.35s,看重放确认跟原型一致,再动手 写 keyframes。复制"只看值"模式,拿到的就是设计想要的那个 transform, 不用拿肉眼估。
修一个在便宜手机上卡顿的 hover
列表项 hover 时变大,整个页面在中端安卓上一顿一顿。你发现它animate 的是 width,在这里换成 scale(1.05),确认视觉一模一样,复制 transform。 动效改走 GPU 合成,不再每帧逼着浏览器重排,20fps 稳稳回到 60fps。
常见踩坑
3D 变换忘了加 perspective。光写 rotateX(60deg) 出来是扁的,因为没有深度提示;在父级或行内加 perspective(800px),倾斜才像真 3D。
animate 错了属性。写 transition all 平时没事,但一旦混进 width、top 这种贵操作就掉帧;写成 transition transform 0.3s,只让合成器跑。
transform-origin 放错位置。翻转却绕着角而不是中心转,多半是 origin 设成了 0 0;要从中心翻就留默认的 50% 50%。
隐私说明
全部在你浏览器里跑。滑块数值、transform-origin、transition 设置和生成的 CSS 都不离开页面,不上传也不记录。工具默认把当前 transform 编码进 URL,方便你分享一条能复现同样预览的链接;这段字符串只存在于你复制的地址栏里,清掉就没了。
常见问题
类似工具组合
做你这行的人, 还会一起用这些。