CSS的2D变换

CSS的2D变换

1. 浏览器的二维坐标

如图所示

2. 2D位移

2D 位移：可以改变元素的位置，具体使用方式：给元素添加转换属性transform。

属性名	作用
translateX	x轴位移
translateY	y轴位移
translate	一个值代表x方向，两个值代表：x和y方向。

3. 2D缩放

可以控制元素缩放，具体使用方式：给元素添加转换属性transform。

属性名	作用
scaleX	设置x轴方向的缩放，1 表示不缩放，大于 1 放大，小 于 1 缩小。
scaleY	设置y轴方向的缩放，1 表示不缩放，大于 1 放大，小 于 1 缩小。
scale	一个值代表同时设置x轴和y轴缩放；两个值分别代表：x缩放、y缩放。

4. 2D旋转

可以让元素在二维平面内，进行顺时针和逆时针的旋转。具体使用方式：给元素添加转换属性transform。

属性名	作用
rotate	设置旋转角度，单位是deg，正值顺时针，负值逆时针。

5. 变换原点

默认的原点是元素的中心，使用 transform-origin 可以设置变换的原点，属性值可以写像素，百分比，left，right，top，bottom。