CSS transform 可视化工具

CSS transform 提供四种基本 2D 变换，可组合使用：
① translate(tx, ty)：平移，沿 X/Y 轴移动元素，正值向右下、负值向左上
② rotate(deg)：旋转，以原点为中心顺时针（正值）或逆时针（负值）旋转
③ scale(sx, sy)：缩放，>1 放大、<1 缩小、<0 翻转（负值镜像）
④ skew(xDeg, yDeg)：倾斜，沿 X/Y 轴倾斜元素，产生平行四边形效果
四种变换可用空格分隔组合：transform: translate(20px, 0) rotate(15deg) scale(1.2);， 顺序影响最终效果（矩阵乘法不满足交换律）。

transform-origin 定义变换的参考点，默认是元素中心（50% 50%）。 变换原点决定了 rotate 旋转的中心、scale 缩放的中心、skew 倾斜的基准点。
例如 transform: rotate(45deg)：
- 原点 center center（默认）：以元素中心旋转 45°
- 原点 left top：以元素左上角为轴心旋转，元素会"甩"到右下方
- 原点 right bottom：以元素右下角为轴心旋转，元素会"甩"到左上方
本工具提供 3x3 共 9 个预设原点位置（左上/上/右上/左/中/右/左下/下/右下）， 可视化展示不同原点对变换结果的影响。

px（像素）：固定平移距离，与元素尺寸无关。translate(50px, 0) 无论元素多大，都向右平移 50 像素。
%（百分比）：相对于元素自身尺寸计算（注意：不是父元素）。 translate(50%, 0) 向右平移元素自身宽度的 50%。这是制作"居中弹窗"的关键技巧：
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
先用 left/top 将元素左上角放到父元素中心，再用 transform: translate(-50%, -50%) 向左上平移自身宽高的一半，实现完美居中。这种写法无需知道元素确切尺寸，响应式友好。

scale 的负值表示镜像翻转：
① scaleX(-1)：水平翻转（左右镜像），常见于"镜像图标"
② scaleY(-1)：垂直翻转（上下镜像），常用于"倒影效果"
③ scale(-1, -1)：旋转 180°（等效于 rotate(180deg)）
④ scale(-0.5, -0.5)：旋转 180° + 缩小一半
负值缩放是制作镜像效果的最简洁方式，比用 rotate + translate 组合更优雅。常见应用：双向箭头图标、对称图案、倒影动画。
注意：负值缩放会改变元素的可点击区域位置，需要配合 transform-origin 精确定位。

非常重要！transform 的多个变换按从右到左的顺序应用（矩阵乘法）， 顺序不同结果完全不同：
transform: translate(100px, 0) rotate(45deg)
- 先旋转 45°，再向右平移 100px（沿原始 X 轴方向）
transform: rotate(45deg) translate(100px, 0)
- 先向右平移 100px，再以原点为中心旋转 45°（元素会"甩"到右下方向）
这是初学者最常犯的错误——以为变换顺序无关紧要。建议：
① 先 translate（定位），再 rotate（旋转），最后 scale（缩放）
② 或在开发者工具中实时调试顺序，观察效果差异
本工具按"平移→旋转→缩放→倾斜"的固定顺序生成代码，符合大多数场景的直觉。

两者都会让元素"变形"，但本质完全不同：
① rotate（旋转）：整体旋转，元素形状不变，仅改变方向。 正方形旋转 45° 后是菱形，但仍保持四边等长、四角相等。
② skew（倾斜）：剪切变形，元素形状改变。 正方形倾斜 45° 后变成平行四边形，四边仍等长但四角不再相等。
视觉差异：
- rotate 后元素"看起来还是原来那个"，只是方向变了
- skew 后元素"被压扁拉长"，形状发生根本变化
应用差异：
- rotate 用于旋转图标、动画转场、3D 翻转
- skew 用于斜切文字、平行四边形按钮、动态变形动画
两者可组合：transform: skew(15deg) rotate(10deg) 产生更复杂的变形效果。

transform 不会影响文档流布局，这是它的核心特性：
① 不脱离文档流：与 position: absolute 不同， transform 后的元素仍占据原始位置，不会让相邻元素重新排列
② 不影响兄弟元素：变换后的元素可能视觉上重叠到其他元素， 但其他元素不会因此移动
③ 性能优化：transform 是 GPU 加速的合成层属性， 不会触发重排（reflow），仅触发重绘（repaint）+ 合成（composite）
④ 动画首选：与 top、left、width、 height 等会触发重排的属性相比，transform 动画性能更优
这就是为什么动画推荐使用 transform + opacity， 而不是改变 top/left。

transform 是 CSS3 的成熟特性，所有现代浏览器（Chrome、Firefox、Safari、Edge） 全面支持 2D 变换。3D 变换（translate3d、rotateX、perspective） 兼容性稍差但主流浏览器均已支持。
旧版浏览器需要前缀：
- -webkit-transform（Safari 早期版本）
- -ms-transform（IE9）
- -moz-transform（Firefox 早期版本）
现代项目无需前缀，IE10+ 完整支持无前缀语法。 transform-origin 兼容性与 transform 一致。
百分比值在 translate 中所有现代浏览器完整支持， 但 transform-origin 的百分比值在 IE9 中略有差异（已无实际影响）。

不会。本工具完全在浏览器内运行，所有变换参数调节与 CSS 生成由 JavaScript 在你本地执行， 不会发送任何配置或代码到服务器。全程零网络请求，可离线使用。