CSS Transform 在线生成器 - 平移/旋转/缩放/倾斜 可视化

CSS Transform 是CSS3引入的一个强大属性，允许你对HTML元素进行平移、旋转、缩放和倾斜等几何变换。它最大的优势在于：

✅ GPU加速：transform由GPU处理，动画流畅不卡顿，不触发重排(reflow)，性能远优于修改top/left/width等属性。
✅ 不影响文档流：变换后的元素仍占据原始空间，不会影响周围元素的布局。
✅ 3D支持：配合perspective可实现逼真的3D效果。
✅ 组合变换：多个变换函数可以组合使用，实现复杂效果。

非常重要！CSS中多个transform函数从右到左依次应用（矩阵乘法顺序）。例如：
transform: translateX(100px) rotate(45deg);
实际执行顺序：先旋转45°，再沿旋转后的X轴平移100px（元素会斜向移动）。

如果写成 transform: rotate(45deg) translateX(100px);
则先平移100px，再绕新位置旋转45°。

推荐顺序（从左到右书写）：translate → rotate → scale → skew，这样符合大多数人的直觉预期。本工具即采用此顺序。

transform-origin 定义了变换的参考原点，即元素围绕哪个点进行旋转、缩放或倾斜。

默认值是 50% 50% 0（元素中心）。

例如：
• transform-origin: top left; — 元素从左上角旋转
• transform-origin: 0% 100%; — 元素从左下角缩放
• transform-origin: center center; — 默认，从中心变换

改变origin会让相同的transform产生完全不同的视觉效果。本工具中的红点标记直观展示了当前的origin位置。

perspective 定义了观察者与屏幕之间的距离，是实现3D效果的关键。

• 值越小（如200px），透视效果越强，3D变形越夸张
• 值越大（如2000px），透视效果越弱，接近正交投影
• 通常设置在父容器上：perspective: 800px;
• 也可作为transform函数：transform: perspective(800px) rotateY(45deg);

只有设置了perspective，rotateX、rotateY、translateZ等3D变换才能产生可见的透视效果。本工具默认800px，你可以拖动滑块调整。

Transform 是性能最优的CSS动画方式之一：

✅ 只触发合成(composite)阶段，不触发重排(reflow)和重绘(repaint)
✅ 由GPU独立处理，不占用主线程
✅ 适合高频动画（如滚动视差、拖拽交互）

优化建议：
• 使用 will-change: transform; 提前告知浏览器
• 避免同时使用大量transform动画（每个元素都创建独立合成层）
• 优先使用transform而非修改top/left实现位移
• 在移动端尤其推荐使用transform做动画

2D Transform 在平面内变换：
• translate(x, y)、rotate(angle)、scale(x, y)、skew(x, y)
• 不涉及Z轴，无透视效果

3D Transform 增加了深度维度：
• translateZ(z)、rotateX(angle)、rotateY(angle)、scaleZ(z)
• 需要perspective来产生透视效果
• 可配合 transform-style: preserve-3d; 在子元素上延续3D空间

使用3D变换可以创建翻转卡片、3D轮播、立体菜单等炫酷效果。