CSS 变换（transform）生成器

CSS 的 transform 属性可以在不影响页面布局的前提下移动、旋转、缩放、倾斜元素，是大多数悬停效果和动画的基础。函数的顺序很重要，叠加后的效果又难以想象，所以这个生成器用单独的控件来构建属性值，让你选择顺序和原点，把结果与原始盒子对照预览，并给出等效的单个 matrix() 或 matrix3d()。

使用方法

1. 设置 translate、rotate、scale 和 skew；如需 3D，再加上 rotateX/rotateY 和 perspective。
2. 选择函数的顺序和 transform-origin。
3. 在预览中把蓝色盒子与虚线的原始位置对比。
4. 复制 CSS；如果脚本或动画需要单个值，就复制 matrix。

计算公式

translate(e, f) = [1 0 e; 0 1 f] · rotate(θ) = [cos θ −sin θ; sin θ cos θ] · scale(x, y) = [x 0; 0 y] · skew(α, β) = [1 tan α; tan β 1] · M = M₁ × M₂ × … in the written order

matrix(a, b, c, d, e, f) 表示 3 × 3 矩阵 [a c e; b d f; 0 0 1]。3D 时工具会相乘 4 × 4 矩阵，perspective(d) 会在最后一行放入 −1/d。所有函数都围绕 transform-origin 起作用。

示例

translate(10px, 20px) rotate(90deg) 把 [1 0 10; 0 1 20] 与 [0 −1 0; 1 0 0] 相乘，得到 matrix(0, 1, −1, 0, 10, 20)：元素顺时针转四分之一圈，并向右移动 10 px、向下移动 20 px。如果改写成 rotate(90deg) translate(10px)，则得到 matrix(0, 1, −1, 0, 0, 10)——这 10 px 的移动现在沿着旋转后的坐标轴进行，也就是朝下。