CSS3（二）---2D转换（transform）：移动(translate)、旋转(rotate)、缩放(scale)

1. 2D转换

	二维坐标系（改变标签在二维平面上的位置和形状的一种技术）

转换（transform） 是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。

• 移动 ：translate
• 旋转 ：rotate
• 缩放： scale
  移动盒子的位置：①定位 ②盒子的外边距 ③2d转换移动

2.移动

2.1 语法

• transform：translate(x,y); x就是x轴上移动位置，y就是y轴上移动位置，x和y逗号分隔 (如果只移动)
• transform:translateX(n); //只移动X方向上的位置 等同于 transform：translate(x,0);
• transform:translateY(n); //只移动y方向上的位置 等同于 transform：translate(0,y);
  x,y单位：
• 像素（100px）：往左边、或者下边移动100个像素、
• 百分比（50%）: 移动的距离是盒子宽度的一半

2.2 重点知识点

• 2D 的移动主要是指 水平、垂直方向上的移动
• translate 最大的优点就是不影响其他元素的位置（定位和盒子的外边距使盒子移动会影响其他元素的位置）
• translate 中的100%单位，是相对于本身的宽度和高度来进行计算
• translate对于行内标签没有效果

2.3 定位显示居中

transform : translate(-50%,-50%);

3. 旋转 --rotate

2D旋转指的是让元素在二维平面内顺时针旋转或者逆时针旋转

3.1 语法

transform :rotate(度数)
单位： deg (不可省略), transform:rotate(45deg);

3.2 重点知识点

• rotate 里面跟度数，单位是 deg
• 角度为正时，顺时针，角度为负时，逆时针
• 默认旋转的中心点是元素的中心点

3.3 设置元素转换的中心点

语法：transform-origin: x y;
① 注意后面的参数 x 和 y 用空格隔开
②x y 默认旋转的中心点是元素的中心 (50% 50%)，等价于 center center
③还可以给 x y 设置像素或者方位名词(top、bottom、left、right、center)
④可以是px像素

4. 缩放 --scale

可以让元素进行放大和缩小。

4.1 缩放语法

语法：transform.scale (x ,y );

4.2 知识要点

注意，x 与 y 之间使用逗号进行分隔
里面写的是数字，不跟单位。就是倍数的意思。

• transform: scale(1, 1): 宽高都放大一倍，相当于没有放大
• transform: scale(2, 2): 宽和高都放大了二倍
• transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致：等比例缩放
• transform:scale(0.5, 0.5): 缩小
• scale 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子;可以设置中心点 transform-origin: x y;

5. 转换综合

知识要点：
1.同时使用多个转换，其格式为 transform: translate() rotate() scale()... 等
2.顺序会影响到转换的效果(先旋转会改变坐标轴方向)
3.但我们同时有位置或者其他属性的时候，要将位移放到最前面