H5 + C3基础（六）（2D转换transform 位移 & 旋转 & 缩放）

2D转换transform

所谓2D转换，就是在二维坐标系内进行各种操作，包括平移，转动，缩放等等；

平移

语法：

transform:translate(x, y);
transform:translateX(x);
transform:translateY(y);

x和y都是相对于屏幕左上角而言，左上为负值，右下为正值；与传统数学坐标系注意区分

要实现盒子的平移，目前有多种方式

• margin
• 定位
• translate
• 父盒子的 padding

注意点：

1. translate不影响其他元素位置，和相对定位类似，不脱离文档流。
2. translate 使用百分比时，是相对自身宽高而言，而不是相对父盒子的宽高
3. 位移只针对行内块和块级元素有效；行内元素不适用。
4. 位移覆盖显示优先级：
   • 有位移的覆盖无位移的
   • 都有位移时，后面定义的元素覆盖前面的元素

利用平移百分比优化盒子水平垂直居中

之前是定位之后，往回平移盒子的尺寸的一半，实现；如下

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() 

由于位移会影响坐标，因此需将位移放在最前面。