CSS transform 生成器（旋转、移动、缩放、倾斜和 3D）

CSS transform 生成器（旋转、移动、缩放、倾斜和 3D）: 用途

transform 属性可以在不影响页面布局的情况下移动、旋转、缩放和倾斜元素，是最轻量的动画方式。调节移动、旋转、缩放、倾斜和 3D 旋转的控件，选择原点和透视，卡片会即时变化。

代码按浏览器应用函数的顺序输出；选择悬停选项后，还会加入平滑过渡，只对使用鼠标的用户生效，并对希望减少动态效果的用户关闭。页面还解释了为什么顺序很重要，以及为什么对 transform 做动画比对 top、left 或 width 更轻量。

使用方法

1. 拖动控件。
2. 选择原点，3D 时选择透视。
3. 复制 CSS。

使用场景

• 卡片的悬停效果。
• 旋转和镜像的图标。
• 3D 翻转卡片。

常见问题

transform 中函数的顺序重要吗？

很重要。translateX(100px) rotate(45deg) 先移动再原地旋转；rotate(45deg) translateX(100px) 先旋转，再沿已旋转的方向移动，最终停在另一个位置。生成器采用移动、旋转、缩放、倾斜的顺序，最容易预测。

为什么动画要用 transform？

transform 和 opacity 是动画开销最小的属性：不会让浏览器重新计算页面布局，通常还在显卡上运行。如果改为对 top、left、width 或 margin 做动画，在性能较弱的手机上会卡顿。

透视有什么作用？

在 3D 旋转（rotateX 和 rotateY）中，透视决定观察者的距离：较小的值（如 300px）会产生强烈而变形的 3D 效果；较大的值（如 1500px）会让旋转更柔和。

真的免费吗？

是的，100%免费。无需注册，无需订阅，不限使用次数。所有工具：Tools123是免费的。

相似工具