CSS transform 生成器 —— 2D + 3D 旋转、缩放、斜切、位移,实时预览

可视化的 CSS `transform` 生成器,覆盖全部 2D 通道(rotate、scale、 skewX/skewY、translateX/translateY)和完整 3D 通道(rotateX/Y/Z、 scaleX/scaleY、translateZ、perspective)。`transform-origin` 既能从 九宫格里点选,也能直接填 `25% 75%` 这种自定义值。`transition` 的时长 和缓动函数可调,改完点 Play 让预览框重放一次动画。预览用的就是同一段 CSS,所见即所得,不存在"预览和实际不一致"。内置 12 个真正能用到产品里 的预设:卡片翻转、上下翻转、心跳放大、缩小按下、原地旋转、左右摇摆、 向上弹跳、向右滑入、3D 倾斜、向上抬起、斜切标签、等距视角。两种输出 模式可切:只复制 `transform: ...;` 那一句塞进现有规则,或者复制完整的 `.box { ... }` 代码块,`transform-origin` 和 `transition` 都帮你接好。 合成器会跳过没动的通道(不会塞一句 `rotate(0deg)` 进去添堵),并且 用更短的写法 —— 等比例缩放给 `scale(1.5)` 而不是 `scale(1.5, 1.5)`, 只动 X 轴的斜切给 `skewX(12deg)` 而不是 `skew(12deg, 0)`,代码塞进 review 也清爽。100% 浏览器本地运行,没有上传,没有注册,你调的参数 不会被记录。配 hover / focus / modal 入场动画特别合适,毕竟动画的 "感觉"一半靠几何,一半靠缓动函数。