CSS Transform 二维生成器
CSS Transform 二维版把 translate、scale、rotate、skew 等函数按顺序拼装成一个 transform 声明,画布实时呈现合成变形,帮你在平面层面精确控制元素位移、旋转角度与缩放比例而不影响文档流。
永久免费本地计算 · 零上传
🔒 全程在浏览器内计算,输入内容不会离开您的设备。
怎么用
- 选择要组合的变形函数
- 设定各函数的参数值
- 调整顺序观察叠加差异
- 复制生成的 transform
典型场景
图标悬停做轻微旋转放大
卡片进入时位移的起始姿态
把元素斜切出动感造型
常见问题
函数顺序会改变结果吗?
会,变换按书写顺序复合,先旋转后平移与反之不同。
会影响布局占位吗?
transform 只改渲染,不改变元素在流中的原始盒模型。
能做 3D 吗?
本页侧重 2D 组合,透视与 3D 旋转请用三维变换版。