CSS Transform 生成器
免费在线CSS变换生成器，无需安装。具有可视化变换属性编辑器。
关于 CSS Transform
通过滑块交互式地构建 transform 声明，支持 translate（X/Y/Z）、scale（X/Y）、rotate（Z/X/Y）和 skew（X/Y），并可编辑 transform-origin 以及调整预览框尺寸。生成的 CSS 使用 translate3d 表示位移，仅在 scale/rotate/rotateX/rotateY/skew 发生变化时才会合并输出，并与 transform-origin 一并生成。
如何使用
1. 拖动 Translate、Scale、Rotate 和 Skew 下的滑块来组合 transform；每个值旁还有数字输入框可供精确输入。 2. 调整预览 Box Size（50–250px），并编辑 Transform-Origin（任意 CSS origin 字符串，默认为 50% 50%）。 3. 点击 Reset 将所有值恢复为中性默认值。 4. 点击 Copy 即可同时复制 transform: ... 和 transform-origin: ... 声明。
Transform 函数与取值范围
translateX/Y/Z：-200 到 200 px，任一非零时合并为 translate3d(x, y, z) 输出。scaleX/Y：0.1 到 3，任一不等于 1 时输出 scale(x, y)。rotate (Z)：-360 到 360deg。rotateX/Y：-180 到 180deg。skewX/Y：-60 到 60deg，任一非零时输出 skew(x, y)。若未修改任何函数，输出为 transform: none。
▶为什么我的旋转只在 3D 下生效，元素看起来却是平的？
rotateX 和 rotateY 分别绕水平和垂直轴旋转，需要在父元素上设置 perspective（或 transform-style: preserve-3d）才能呈现真正的 3D 效果。预览区未应用 perspective，因此结果可能看起来是被压扁而非完全旋转。
▶输出中是否包含 transform-origin？
包含。复制的文本会在不同行同时包含 transform: ... 和 transform-origin: ...，使用你输入的 origin 字符串（默认为 50% 50%）。
▶可以输入精确值而不拖动滑块吗？
可以。每个 transform 值在滑块旁都配有数字输入框，支持直接输入。transform-origin 字段可接受任意合法的 CSS origin 字符串。
▶为什么我只移动了一个轴，输出却是 translate3d？
对于任何非零位移，工具始终输出 translate3d(x, y, z) 以保证结果对 GPU 友好；其余轴默认为 0。
如果这个工具对你有帮助的话，请考虑请我喝杯咖啡。
请给我买杯咖啡吧。