H5 + C3基础（六）（2D转换transform 位移 旋转 缩放）
2D转换transform &
- 2D转换transform
- 平移
- 利用平移百分比优化盒子水平垂直居中
- 旋转
- 指定2d变换的中心点 transform-origin
- 缩放
- 2d转换简写
2D转换transform
所谓2D转换，就是在二维坐标系内进行各种操作，包括平移，转动，缩放等等；
平移
语法：
transform:translate(x, y);
transform:translateX(x);
transform:translateY(y);
x和y都是相对于屏幕左上角而言，左上为负值，右下为正值；与传统数学坐标系注意区分
要实现盒子的平移，目前有多种方式
- margin
- 定位
- translate
- 父盒子的 padding
注意点：
- translate不影响其他元素位置，和相对定位类似，不脱离文档流。
- translate 使用百分比时，是相对自身宽高而言，而不是相对父盒子的宽高
- 位移只针对行内块和块级元素有效；行内元素不适用。
- 位移覆盖显示优先级：
- 有位移的覆盖无位移的
- 都有位移时，后面定义的元素覆盖前面的元素
利用平移百分比优化盒子水平垂直居中
之前是定位之后，往回平移盒子的尺寸的一半，实现；如下
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
background-color: #ee20ee;
margin-left: -50px;
margin-top: -50px;
如果盒子尺寸一旦变化，margin的值也要跟着改动，如果使用平移 50% 实现，就无需改动。
position: absolute;
width: 100px;
height: 100px;
top: 50%;
left: 50%;
background-color: #ee20ee;
transform: translate(-50%, -50%);
旋转
绕着哪个轴旋转
语法：
transform:rotate(45deg); // 默认相当于 rotateZ
transform:rotateX(45deg);
transform:rotateY(45deg);
transform:rotateZ(45deg);
transform:rotate3d(x, y, z, 180deg); // 从3维原点到指定3维坐标点（x,y,z）连接的线旋转 180度。
旋转几度，默认旋转点为盒子中心点
transform:rotate(45deg);
同样，旋转也只对块级元素和行内块有效
指定2d变换的中心点 transform-origin
旋转点坐标 中间是空格不是逗号
包括 缩放和旋转的中心点都可以通过这个属性设置
语法：
transform-origin: x y; // 指定Z轴旋转（2d旋转）中心点
除了给定像素值，还可以指定方位：top，bottom，left，right，center
transform-origin: 10px 10px;
示例
.c1 {background-color: #e6393c;transition: all 0.5s;transform-origin: left bottom;
}.c1:hover {transform: rotate(45deg);
}
缩放
设置盒子的尺寸在指定方向上缩放指定倍数（整数小数均可）
语法：
transform:scale(x, y); # 分别设置x，y轴方向尺寸
transform: scale(a); # 统一设置设置x，y轴方向尺寸为同一个值
transform:scaleX(x); # 设置x轴方向尺寸
transform:scaleY(y); # 设置y轴方向尺寸
transform:scaleZ(z); # 设置z轴方向尺寸
transform: scale3d(2, 2, 2); 分别设置 xyz 三个方向的上的扩缩比
# 以下三者等价
transform: scale(2);
transform: scaleX(2) scaleY(2);
transform: scale(2, 2);
2d转换简写
先后顺序为：位移 → 旋转 → 缩放
transform: translate() rotate() scale()
由于位移会影响坐标，因此需将位移放在最前面。