2D 变换
0px
0px
0deg
1
1
0deg
0deg
3D 变换
800px
0deg
0deg
0deg
0px
变换原点
预览
Transform
在线 CSS Transform 变换生成器,可视化调节 translate 平移、rotate 旋转、scale 缩放、skew 倾斜等参数,实时预览变换效果并一键复制 transform 代码,支持 2D 与 3D 变换。纯浏览器本地运行,免费、无需安装。
先填写或调整「X: 50%」、「Y: 50%」;修改输入或使用页面控件后查看结果区域。
「X: 50%」的输入范围为 0~100。「Y: 50%」的输入范围为 0~100。请按字段标注的单位输入,先检查超出范围、空值和小数点,再核对结果。
先用最小示例验证,再将结果放回实际开发环境检查。语言版本、运行环境、编码和配置项可能与浏览器中的处理规则不同。
本页的主要处理逻辑在浏览器内执行。页面加载资源、打开外部链接,以及带外部地址的内容预览仍可能产生网络请求;“本地处理”并不表示整个网页完全没有网络活动。
先检查「X: 50%」、「Y: 50%」是否完整,以及格式、单位和当前选项是否匹配。修改输入后,查看页面的结果或错误提示;可先用少量数据定位问题。
Box Shadow 生成器 · CSS 动画生成器 · Border Radius 生成器 · CSS 盒子阴影生成器 · 全部开发工具