BLUEPRINT / 04 坐标网格

Transform预览

Q: transform-origin 有什么用？

它是旋转与缩放的支点，默认在元素中心。改成 0 0 会让元素绕左上角转，做开门、翻页效果时经常要改。九宫格控件会直接输出对应的百分比值。

Q: rotateY 看起来像压扁而不是翻转，为什么？

缺少透视。需要给父元素设置 perspective，例如 800px，或者写成 perspective(800px) rotateY(45deg)。本页的透视滑杆就是用来观察这个差别的。

Q: matrix 里的数字分别代表什么？

二维 matrix(a,b,c,d,e,f) 中 a 与 d 是缩放、b 与 c 是斜切与旋转的正余弦分量、e 与 f 是平移量。页面给出的合成值用于核对函数顺序，保留四位小数。

Q: 批量校验能查出哪些错误？

括号不配对、拼错的函数名、缺少 deg 或 px 单位、超出合理范围的缩放与角度、连续两个逗号等常见笔误都会逐行标出原因；合法行可复制或一并导出 CSV。

transform 最难直觉化的是函数顺序与变换原点。把位移、缩放、旋转、斜切与 3D 透视摊成滑杆，画布里虚线是原位置、实线是变换后，右侧同步读出 transform 串与 matrix 合成值。

15旋转 °

1.00缩放倍

50% 50%变换原点

DWG. 04TRANSFORM SHEET

顺序：translate → scale → rotate → skew

坐标画布

虚线＝变换前

ORIGIN

TRANSFORMtransform · origin

顺序开关当前：先平移后旋转

代码与矩阵

CSS 声明

二维合成矩阵（核对函数顺序）

批量变换串校验

每行一条 transform 值，例如 rotate(15deg) scale(1.2)。检查括号配对、函数名与单位，结果可导出。

🧭变换顺序与矩阵口径函数串联、原点与 3D 透视

函数顺序	transform 从左到右依次应用，translate 后 rotate 与 rotate 后 translate 结果不同；本页按面板顺序拼接，并在矩阵区显示最终合成值。
二维函数	translate / translateX / translateY、scale、rotate、skew 与 matrix 都在支持范围内，单位分别取 px、倍、deg。
三维扩展	rotateX / rotateY / translateZ 需要父级 perspective 才看得出纵深；页面把透视值与 perspective-origin 做成独立控件。
变换原点	transform-origin 默认 50% 50%，改成左上角或底部中点后，旋转与缩放的支点会变；九宫格控件可直接切换并输出百分比。
矩阵校验	代码区给出 matrix()/matrix3d() 的近似合成值，用于核对顺序；数值保留四位小数，超出范围会提示并夹回。
批量与转义	批量表最多 12 组变换串，支持粘贴校验：括号不配对、单位缺失、非法函数会逐条标红；导出按 CSV 转义规则处理。

这个工具解决什么问题

transform 最难直觉化的地方是函数顺序与变换原点。这个 Transform预览把六个常用函数摊成滑杆，中间画布实时画出变换前后的对照网格，右侧同步显示 transform 简写、matrix 合成值与 transform-origin。支持 3D 透视、九宫格原点切换、常用预设、批量变换串校验、代码转义导出与 URL 分享。

四条实用原则

先平移后旋转：想让元素绕自身中心转，通常把 rotate 放在最后；顺序一换就会绕起点画弧。
scale 别用负值做镜像：负值会翻转内容，做镜像更推荐单独的 scaleX(-1) 并写清意图。
3D 需要透视：只写 rotateY 没有 perspective，视觉上只是横向压扁。
动画优先 transform：它不触发布局，配合 transition 比改 top/left 更流畅。

按这几步用

选预设：首屏点翻转卡片、轻微倾斜、缩放弹跳等预设，一键套用完整变换串。
调六项参数：拖动位移 X/Y、缩放、旋转、X/Y 斜切，画布同步显示变换后的方框与坐标轴。
设原点与透视：用九宫格切换 transform-origin，调节 perspective 观察 3D 纵深。
读代码与矩阵：代码区输出 transform、transform-origin、perspective 三段，并给出 matrix 合成值供核对。
批量校验与导出：把多条变换串粘进批量表，逐条检查括号、单位与函数合法性，导出 CSV 或分享链接。

小提示

所有变换在浏览器本地用 CSS 实时渲染，不上传代码；matrix 值由参数按二维仿射矩阵顺序合成，仅供核对，不替代浏览器最终计算。

更新记录

v1.0 2026-11-11 工具上线：六函数滑杆实时预览、变换前后对照网格、九宫格 transform-origin、3D 透视与 perspective-origin、matrix 合成值读出、五套预设、批量变换串校验与 CSV 转义导出、URL 参数分享。

常见问题

为什么 translate 和 rotate 换个顺序结果差很多？

transform 的函数按书写顺序依次作用到坐标系上：先 rotate 再 translate，位移方向会跟着坐标系一起转；先 translate 再 rotate，则是先挪到新位置再自转。页面的画布会同时画出两种顺序的对照。

transform-origin 有什么用？

它是旋转与缩放的支点，默认在元素中心。改成 0 0 会让元素绕左上角转，做成开门、翻页效果时经常要改。九宫格控件会直接输出对应的百分比值。

rotateY 看起来像压扁而不是翻转，为什么？

缺少透视。需要给父元素设置 perspective（例如 800px），或者用 transform: perspective(800px) rotateY(45deg)。本页的透视滑杆就是用来观察这个差别的。

matrix 里的数字分别代表什么？

二维 matrix(a,b,c,d,e,f) 中 a/d 是缩放、b/c 是斜切与旋转的正余弦分量、e/f 是平移量。页面给出的合成值用于核对函数顺序，保留四位小数。

批量校验能查出哪些错误？

括号不配对、拼错的函数名、缺少 deg/px 单位、超出合理范围的缩放与角度，以及连续两个逗号等常见笔误，都会逐行标出原因；合法行可以直接复制或一并导出。

导出的 CSV 会在 Excel 里串列吗？

不会。方案名与变换串里的逗号、双引号、换行都按标准 CSV 规则用双引号包裹并把内部引号加倍，中文用 UTF-8 BOM 兼容 Excel 直接打开。

💬 留言板 0

全部留言需审核通过后展示

💬

还没有留言，来抢沙发吧！