交互式调节 transform 与变换原点。动画过渡见 CSS 动画预设； 布局见 Flexbox 可视化。
快速预设
2D 变换
0px
0px
0deg
1
1
0deg
0deg
3D 变换
800px
0deg
0deg
0deg
0px
变换原点
实时预览
BOX
🔄 CSS Transform 生成器
CSS Transform 生成器 - WebUtils
快速高效
简单易用
安全隐私
使用说明
通过滑块调节 2D/3D transform 与 transform-origin，实时预览效果并生成可复制 CSS；配置自动保存到 localStorage。
- 使用左侧滑块调节 translate、rotate、scale、skew 或 3D 旋转与透视。
- 点击九宫格或滑块设置 transform-origin；可用快速预设一键体验常见效果。
- 右侧预览区实时反映变换；点击「复制代码」获取完整 CSS 片段。
数据均在浏览器本地处理，不会上传到服务器。