【CSS】：transforms（变形）

目录
1. CSS3 transform 能做什么？
2. transform-origin(变换起点)
3. transform:translate(位移)
4. transform:scale(缩放)
5. transform:rotate(旋转)
6. transform:skew(倾斜)

1. CSS3 transform 能做什么？

通过改变坐标空间，CSS transforms 可以在不影响正常文档流的情况下改变作用内容的位置。

• 旋转（rotate）

• 移动（translate）

• 缩放（scale）

• 扭曲（倾斜）

• 矩阵变换（matrix）

• 变换起点（transform-origin）

2. transform-origin(变换起点)

• 转换起点是应用转换的点；
• 转换起点的初始值是 50% 50%;
  • 例如：rotate()函数的转换原点是旋转中心。
  • 例如：scale()函数的转换原点是旋转中心。

• API；

transform-origin: 2px;
transform-origin: bottom;
transform-origin: 3cm 2px;
transform-origin: left 2px;
transform-origin: right top;
transform-origin: 2px 30%;
transform-origin: left 5px;
transform-origin: right bottom;

3. transform:translate(位移)

translate() 这个 CSS 函数在水平和/或垂直方向上重新定位元素。

语法：

transform: translate(<length-percentage> , <length-percentage>?)

示例：

/* Single <length-percentage> values */
transform: translate(200px);
transform: translate(50%);

/* Double <length-percentage> values */
transform: translate(100px, 200px);
transform: translate(100px, 50%);
transform: translate(30%, 200px);
transform: translate(30%, 50%);

4. transform:scale(缩放)

scale() 用于修改元素的大小。

• 该变换通过一个二维向量确定在一个方向缩放的多少。
• 当坐标值处于区间 [-1, 1] 之外时，该变换将在相应的坐标方向上放大该元素，当处在区间之中时，该变换将在相应的坐标方向上缩小该元素。当值为1时将不进行任何处理，当为负数时，将进行像素点反射之后再进行大小的修改。
• 别忘了，默认情况下，放缩起始点为元素中心（transform-origin）；

语法：

scale(sx)
scale(sx, sy)

示例：

transform: scale(2); /* 等同于变换: scaleX(2) scaleY(2);*/
transform: scale(2, 0.5); /* 等同于 scaleX(2) scaleY(0.5) */

5. transform:rotate(旋转)

CSS 的 rotate() 函数定义了一种将元素围绕一个定点（由transform-origin属性指定）旋转而不变形的转换。指定的角度定义了旋转的量度。若角度为正，则顺时针方向旋转，否则逆时针方向旋转。

语法：

transform: rotate(a) // a 是一种<angle>，表示旋转的角度。

示例：

transform: rotate(45deg);

6. transform:skew(倾斜)

skew() 函数定义了一个元素在二维平面上的倾斜转换。

• 这种转换是一种剪切映射(横切)，它在水平和垂直方向上将单元内的每个点扭曲一定的角度。
• 每个点的坐标根据指定的角度以及到原点的距离，进行成比例的值调整；
• 因此，一个点离原点越远，其增加的值就越大。

语法：

skew(ax)
skew(ax, ay)

示例：

transform: skew(10deg); /* Equal to skewX(10deg) */
transform: skew(10deg, 10deg);

参考：

Using_CSS_transforms： https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms transform-function： https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate() https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function/scale() https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate() https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skew() transform-origin： https://css-tricks.com/almanac/properties/t/transform-origin/