CSS 坐标系统

理解 CSS 中的坐标系统是学习 transform 的基础

坐标系统说明

在 CSS 中，坐标系统遵循以下规则：

X 轴（横轴）：从左到右，正值向右移动，负值向左移动
Y 轴（纵轴）：从上到下，正值向下移动，负值向上移动
Z 轴（深度轴）：垂直于屏幕，正值向外（靠近用户），负值向内（远离用户）
原点：默认在元素的中心点（可通过 transform-origin 修改）

X → Y ↓

原点

注意：CSS 的 Y 轴正方向是向下的，这与数学中的笛卡尔坐标系不同！

单位说明

px - 像素，最常用的绝对单位
% - 百分比，相对于元素自身的尺寸
em - 相对于当前元素的字体大小
rem - 相对于根元素的字体大小
deg - 角度，360deg = 一圈
rad - 弧度，2π rad = 一圈
turn - 圈数，1turn = 360deg