CSS Transform 生成器帮助你可视化创建 2D/3D 变换效果。支持旋转、缩放、位移、倾斜等变换，实时预览并生成 CSS 代码。
变换类型
- translate()：位移，移动元素位置
- rotate()：旋转，绕某点旋转角度
- scale()：缩放，放大或缩小元素
- skew()：倾斜，沿X或Y轴倾斜
- matrix()：矩阵变换，组合多种效果
- perspective()：3D透视效果
3D 变换
开启 3D 变换需要设置 perspective 和 transform-style。rotateX/Y/Z 可以绕不同轴旋转，translateZ 可以在Z轴移动。配合 transition 可以创建炫酷的翻转效果。
性能优势
transform 变换不会触发重排（reflow），由 GPU 加速渲染，性能优于修改 top/left。动画中优先使用 transform 实现位移、缩放效果。
FAQ
Q: 多个变换的顺序重要吗？
A: 非常重要。transform 从右向左应用，不同顺序结果不同。例如先旋转再位移，和先位移再旋转，最终位置完全不同。
Q: 如何居中后旋转不偏移？
A: 使用 transform-origin 设置变换原点。默认是元素中心。若想绕左上角旋转，设置 transform-origin: 0 0。
Q: 变换会影响布局吗？
A: 不会。transform 变换不影响文档流，元素原本占据的空间保持不变。其他元素不会因为变换而移动位置。