CSS变换生成器

什么是CSS变换生成器？

如何使用CSS变换生成器

1. 1

   选择变换类型：在左侧变换选项区，勾选你需要添加的变换类型，可选平移、旋转、缩放、倾斜、透视等，根据最终想要的效果勾选对应类型即可

2. 2

   拖拽调整参数：找到你勾选好的每一种变换，拖动对应参数旁的滑块，实时修改X轴、Y轴、Z轴的数值大小，也可直接输入具体数值

3. 3

   预览变换效果：在页面中部的预览区域，可实时查看当前参数组合下元素变换后的最终显示效果，调整参数时预览会同步更新

4. 4

   复制生成代码：调整完成后，点击页面下方代码生成区的完整代码框，选中所有生成的变换代码，复制后粘贴到你的项目样式中即可

什么场景会用到？

计算示例

注意事项

• 本工具仅生成transform属性的核心代码，不包含选择器、其它CSS属性，请自行根据需求补充完整。
• skew参数的两个角度分别对应X轴和Y轴的倾斜变形，不要和旋转角度混淆，倾斜角度超过90度会出现反向变形效果。
• 生成的代码采用标准CSS语法，兼容所有主流现代浏览器，老旧IE浏览器的兼容写法需要手动补充。
• 调整参数时仅实时更新预览画布上的变换效果，不会自动保存参数，刷新页面后参数会重置为初始值。

常见问题

参考资料

• W3C CSS Transforms Module Level 1 官方规范
• MDN Web Docs CSS transform 属性文档

本页工具遵循W3C CSS变换标准语法生成代码，所有示例代码均经过实际运行验证，由工具集编辑组维护更新。