CSS Transform 生成器

如何使用

1. 设置位移 X 与 Y（像素）移动方块。
2. 设置旋转角度（deg），绕原点转动。
3. 设置缩放 X 与 Y：小于 1 缩小，大于 1 放大。
4. 设置倾斜 X 与 Y（deg）拉斜方块。
5. 设置变换原点移动支点，如 left top 或 20% 80%；只填一个值时第二个默认为 center。
6. 每次输入方块都实时更新，随后复制 CSS。

常见用途

• 悬停与按下态：卡片小位移抬起，按钮悬停微倾。
• 角标与缎带：把角落标签旋转到位。
• 图标动效：聚焦时缩放图标，不影响布局。
• 斜边版块：用 skewY 拉斜装饰色带。
• 支点实验：同一旋转换个原点，效果完全不同。

为何保证隐私

变换字符串由本页面根据你输入的数值生成并套到预览元素上，不上传任何数据，工具可离线使用。

常见问题

问：函数的应用顺序是什么？ 答：CSS 从左到右依次相乘矩阵，最左侧的函数最后生效。工具按位移、旋转、缩放、倾斜的顺序输出，与控件一致；需要不同组合时，把复制出去的 CSS 手动调序即可。

问：transform-origin 可以填什么？ 答：一或两个值，可以是关键字（left、center、right、top、bottom）、百分比或长度。只填一个值时第二个默认为 center，留空则回退为 50% 50%。

问：支持 3D 吗？ 答：不支持。工具只覆盖 2D 变换：位移、旋转、缩放、倾斜。透视与 3D 旋转需要自己追加函数。

问：预览和我的页面一致吗？ 答：预览方块用同一份 transform 与 origin，动作一致。方块为 96 像素；把 CSS 用到尺寸不同的元素上取值不变，视觉幅度随元素大小变化。