🔄 CSS变换生成器

关于CSS变换生成器

transform CSS属性让你旋转、缩放、倾斜或平移元素。它修改视觉格式化模型的坐标空间而不破坏正常文档流。本生成器让你通过实时控件组合所有四种2D变换并即时复制结果。

可控属性

• 旋转 —— 按角度（度）旋转元素。
• X/Y轴缩放 —— 沿各轴调整元素大小。1 = 原始大小。
• X/Y轴平移 —— 沿各轴移动元素。
• X/Y轴倾斜 —— 按角度沿各轴倾斜元素。

如何使用

1. 调整每个滑块应用所需变换。
2. 组合多个变换——按列出的顺序应用。
3. 拖动时观察实时预览更新。
4. 点击复制CSS并粘贴到样式表中。

常见问题

变换顺序重要吗？ 是的。rotate(45deg) scale(2) 与 scale(2) rotate(45deg) 不同。输出按 rotate → scale → translate → skew 顺序应用。

会影响周围布局吗？ 不会。transform 仅改变视觉渲染——元素在布局中仍占据原始空间。

可以为此添加动画吗？ 可以。将变换包裹在 transition 或 @keyframes 动画中可实现平滑运动。