CSS3 2D转换
转换（transform） 是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果
转换（transform）你可以简单理解为变形
- 移动：translate
- 旋转：rotate
- 缩放：scale
二维坐标系
2D转换是改变标签在二维标签上的位置和形状的一种技术，先来学习二维坐标系
移动 translate
2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位
语法：
transform: translate(x,y);
或者分开写
transform: translateX(n);
transform: translateY(n);
重点：
- 定义2D转换中的移动，沿着 X 和 Y 轴移动元素
translate最大的优点：不会影响到其他元素的位置translate中的百分比单位是相对于自身元素的translate:(50%,50%);
例：让一个盒子水平垂直居中
div {
position: absolute;
top:50%;
left:50%;
translate: (-50%,-50%);
}
- 对行内标签没有权限
旋转 rotate
2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转
语法：
transform: rotate(度数);
重点：
- rotate里面跟度数，单位是deg 比如 rotate(45deg)
- 角度为正时，顺时针，负时，为逆时针
- 默认旋转的中心点是元素的中心点
例：
div {
position: relative;
width: 249px;
height: 35px;
border: 1px solid #000;
}
div::after {
content: "";
position: absolute;
top: 8px;
right: 15px;
width: 10px;
height: 10px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
transform: rotate(45deg);
transition: all 0.2s;
}
div:hover::after {
transform: rotate(225deg);
}
旋转中心点 transform-origin
我们可以设置元素转换的中心点
语法：
transform-origin: x y;
重点：
- 注意后面的参数 x 和 y 用空格隔开
- x y 默认转换的中心点是元素的中心点（50% 50%）
- 还可以给 x y 设置 像素或者方位名词（top bottom right left）
缩放 scale
缩放，顾名思义，可以放大和缩小，只要给元素添加上了这个属性就能控制它放大还是缩小
语法：
transform: scale(x,y);
注意：
- 注意其中的 x 和 y 用逗号分离
transform: scale(1,1);：宽和高都放大1倍，相对于没有放大transform: scale(2,2);：宽和高都放大了2倍transform: scale(2);：只写一个参数，第二个参数则和第一个参数一样，相当于transform: scale(2,2);transform: scale(0.5,0.5);：缩小- sacle 缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子
综合写法
注意：
- 同时使用多个转换，其格式为：
transform: translate() rotate() scale() ...; - 其顺序会影响转换的效果（先旋转会改变坐标轴方向）
- 当我们同时有位移和其他属性的时候，记得要将位移放到前面
总结
- 转换
transform我们简单理解就是变形 有2D 和 3D 之分 - 我们暂且学了三个，分别是 位移 旋转 和 缩放
- 2D 移动
translate(x,y)最大的优势就是不影响其他盒子，里面参数用%，是相对于自身宽度和高度来计算的 - 可以分开写比如
translateX(x)和translateY(y) - 2D 旋转
rotate(度数)可以实现旋转元素 度数的单位是deg - 2D 缩放
sacle(x,y)里面的参数是数字 不跟单位 可以是小数 最大的优势 不影响其他盒子 - 设置转化中心点
transform-origin: x y;参数可以是百分比、像素或方位名词 - 当我们进行综合写法，同时有位移和其他属性的时候，记得要将位移放到最前
