研发工具 · 几何变换

CSS 二维变换核对

同样平移80像素，放在旋转前后会到不同位置。切换函数书写顺序，观察浏览器的实际变换。

1. 设置变换参数

水平平移 px垂直平移 px旋转角度 deg水平缩放垂直缩放

函数书写顺序变换原点

平移±150 px，角度±180°，缩放0.1–3，最多两位小数。正角度在此从左到右排版的预览中顺时针旋转。

上边 ↑

虚线是原位置。大幅变换可能超出预览框；这不会改变文档流中占用的空间。

matrix(0, 1, -1, 0, 80, 0)

矩阵按 a,b,c,d,e,f 显示，四舍五入到6位小数。原点另行作用，不包含在此矩阵的e、f中。对点坐标可理解为先应用右侧函数。

.tile {
  transform: translate(80px, 0px) rotate(90deg) scale(1, 1);
  transform-origin: 50% 50%;
}

只包含二维平移、旋转、正数缩放及三个原点，无3D、透视、斜切或动画。导出仅含变换规则，元素尺寸由实际页面决定。参数只在当前页面内存计算，不上传或自动保存。