关于 CSS Transform 生成器
该工具用于可视化组合 transform 变换，包括平移、旋转、缩放、倾斜与变换原点，并实时输出 CSS。
核心功能
- 多维变换控制：
translate、rotate、scale、skew参数联动调节。 - 原点选择：支持常见
transform-origin预设位置。 - 缩放锁定：可锁定 X/Y 等比缩放。
- 预设效果：一键应用常见变换组合。
- 实时预览与代码复制：边看效果边导出 CSS。
使用说明
- 在控制区调整各项变换参数。
- 选择 transform-origin 并查看预览。
- 按需启用预设或重置再调。
- 复制生成代码应用到目标元素。
使用场景
- 卡片悬停、按钮动效等交互样式调试。
- 2D 视觉错位与层次效果设计。
- 前端动画原型阶段快速试验参数。
常见问题
为什么元素位置偏移与预期不一致？
通常与 transform-origin 或父级布局上下文有关，建议同时检查原点和容器定位。
变换顺序会影响结果吗？
会。transform 函数顺序不同，最终矩阵结果也不同。