css 二维变换之详说

二维变换包括对HTML元素进行移动、旋转、缩放，分别对应着transform属性的属性值translate、rotate、scale。

移动
transform：translate(x, y); 在x轴和y轴上移动元素。

旋转
transform:rotate(角度值); 默认是让元素绕其中心点旋转。角度值范围为0~360，单位是deg。
还可以使用transform-origin属性为元素的旋转设置原点。旋转原点不一定是元素的中心点或某一角，事实上，可以是围绕任何一点旋转元素。

transform-origin: 0 0; 定义的属性分别是元素上的x轴和y轴上的某一相交的点作为旋转的原点。

举个栗子：
transform-origin: 0 0; 代表旋转原点在该HTML元素的左上角。
transform-origin: 100% 0; 代表旋转原点在该HTML元素的右上角。
transform-origin: 0 100%; 代表旋转原点在该HTML元素的左下角。
transform-origin: 100% 100%; 代表旋转原点在该HTML元素的右下角。

该属性的数值可根据项目需要进行调整。