⤢

CSS Transform 生成器

将 translate、rotate、scale 和 skew 组合为单条 CSS transform，并提供实时预览。

文件始终留在此设备上

文件在浏览器中处理，绝不上传。网站会下载运行工具所需的代码和资源。无需账号，也无追踪。

使用“下载”将此工具保存为单个 HTML 文件，以便离线使用。

translateX: 0px

translateY: 0px

rotate: 0deg

scale: 1

skewX: 0deg

结果

输出

关于此工具

拖动滑块来组合 translate、rotate、scale 和 skewX，预览方块并复制 transform，全部在浏览器中完成。

这些函数按什么顺序应用？

先 translate，再 rotate，然后 scale，最后 skewX，与输出中显示的顺序一致。

为什么 scale 是百分比滑块？

滑块范围为 0–200%，会转换为小数因子，因此 100% 即表示 scale(1)。