2D转换（变换）transform

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

• 缩放：scale
• 移动：translate
• 旋转：rotate
• 倾斜：skew

2d移动 translate

1. 给元素添加 转换属性 transform

2. 属性值为 translate(x,y) 如 transform:translate(50px,50px);

3. translate中的百分比单位是相对于自身元素的 translate:(50%,50%);

4. translate类似定位，不会影响到其他元素的位置

5. 对行内标签没有效果

2d旋转 rotate

1. 给元素添加转换属性 transform
2. 属性值为 rotate(角度)
3. 如 transform:rotate(30deg) 顺时针方向旋转30度
4. 角度为正时 顺时针 负时 为逆时针
5. 默认旋转的中心点是元素的中心点

转换中心 transform-origin

origin：原点，如果与rotate旋转配合使用，就是旋转的中心点。如果与scale配合使用，就是缩放的基准点。

• 注意后面的参数 x 和 y 用空格隔开
• x y 默认转换的中心点是元素的中心点 (50% 50%)
• 还可以给x y 设置 像素 或者 方位名词 （top bottom left right center）

2d缩放 scale

1. 给元素添加转换属性 transform
2. 转换的属性值为 scale(宽的倍数,高的倍数)
3. 如 宽变为两倍，高变为3倍 transform:scale(2,3)

• 注意其中的x和y用逗号分隔
• transform:scale(1,1) ：宽和高都放大一倍，相对于没有放大
• transform:scale(2,2) ：宽和高都放大了2倍
• transform:scale(2) ：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)
• transform:scale(0.5,0.5)：缩小
• sacle缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子（相对于修改宽高而言：宽高修改之后会影响其他盒子）

综合写法

1. 同时使用多个转换，其格式为：transform: translate() rotate() scale() …等（空格隔开多个转换）
2. 其顺序会影转换的效果。（先旋转会改变坐标轴方向）
   1. transform: translate(150px, 50px) rotate(180deg); 这个会在向右向下位移过程中进行旋转。
   2. transform: rotate(180deg) translate(150px, 50px); 这个会先旋转，旋转之后坐标轴方向颠倒了，然后他就会向左向上位移了。
3. 所以 当我们同时有位移和其他属性的时候，记得要将位移放到最前。

总结：

1. 转换transform 我们简单理解就是变形 有2D 和 3D 之分
2. 我们暂且学了三个 分别是 位移 旋转 和 缩放
3. 2D 移动 translate(x, y) 最大的优势是不影响其他盒子， 里面参数用%，是相对于自身宽度和高度来计算的
4. 可以分开写比如 translateX(x) 和 translateY(y)
5. 2D 旋转 rotate(度数) 可以实现旋转元素 度数的单位是deg
6. 2D 缩放 sacle(x,y) 里面参数是数字 不跟单位 可以是小数 最大的优势 不影响其他盒子
7. 设置转换中心点 transform-origin : x y; 参数可以百分比、像素或者是方位名词
8. 当我们进行综合写法，同时有位移和其他属性的时候，记得要将位移放到最前