CSS3-2D转换transform
2D转换之translate（重点）
基本语法
属性：transform,属性值：translate(X,Y),属性值也可以分开书写：
transform:translate(X,Y)
transform:translateX(n)
transform:translateY(n)
transform: translate(50%, 50%);
transform: translateX(50%);
transform: translateY(50%);
注意：
01、2D转换中的移动translate是沿着X轴和Y轴进行移动的，对行内元素直接设置是不生效的，如果想要生效就要转化为块或者行内块；
02、translate改变元素在页面中的位置，类似定位，不会影响到其他元素的位置，所以我们不用担心元素脱离文档流；
03、translate的取值可以是实际的像素值:translate(100px,200px),也可以是百分比:translate(50%,50%),如果设置的是百分比那么移动的位置是盒子自身宽高的相对值，比如50%就是自己的宽高的一半；
04、如果转换和定位同时存在，2d转换在定位的书写位置后面，就会将定位的盒子压住，我们可以给定位的盒子设置z-index调节位置；
定位的盒子水平垂直居中设置
绝对定位和固定定位的盒子不能使用margin:auto;设置水平居中，如果想要居中我们就需要如下设置：
设置定位盒子的left :50%; 设置盒子的margin-left:-自己的宽度的一半，让盒子水平居中；
设置定位盒子的top :50%; 设置盒子的margin-top:-自己的高度的一半，让盒子垂直居中；
我们现在可以将margin-left和margin-top的取值用2d位移取值为百分比进行替换，哪怕盒子没有固定的宽高都可以生效；
position: fixed;
left: 50%;
top: 50%;
width: 300px;
height: 300px;
/* margin-left: -150px;
margin-top: -150px; */
/* translate取值为百分比是盒子自身宽高的百分比，比如50%就相当于300的一半150 */
transform: translate(-50%, -50%);
2D转换之rotate（重点）
基本语法
属性：transform 属性值： rotate(度数)；
transform:rorate(度数) ----- 度数的单位是deg ；
transform: rotate(30deg);
注意
01、rotate后面的度数，如果是正数就是顺时针旋转，如果是负数就是逆时针旋转；
02、rotate旋转默认的中心点是元素的中心点；
03、rotate旋转得到度数表示旋转到某一个度数不是旋转了，也就是从当前的度数旋转到另一个度数；
2D转换之中心点（重点）
语法：transform-origin：X Y;
01、两个参数X和Y之间是用空格隔开的;
02、X和Y默认的转换中心点取值为(50% 50%);
03、X和Y也可以设置实际的像素值或者方位名词（top、bottom、left、right、center）；
2D转换之scale（重点）
语法：transform：scale(X,Y);
- 两个参数X和Y之间是用逗号隔开的;
- X和Y的取值如果等于1表示原始大小，小于1表示缩小倍数，大于1表示放大倍数；
- X和Y如果只写一个值表示两个参数都是一样；
- Scale缩放最大的优势：可以设置转换中心点缩放，默认是中心缩放，还不会影响其他盒子的显示位置；
2D转换综合写法以及顺序问题（重点）
/* transform: translateX(1200px);
transform: rotate(360deg);
transform: scale(3); */
transform: translateX(1200px) rotate(360deg) scale(3);
如果三个属性要同时存在，我们需要用空格将各个属性隔开，位移属性必须写在第一位；
如果将旋转放在第一位，旋转的之后会将网页的坐标系也进行了旋转，所以效果会出现问题；
transform:skew( 角度 )
transform: skew(-30deg);
(1) 设置一个参数表示X 轴方向角度（一般2D我们只需要设置一个值即可）
(2) 设置二个参数中间用逗号隔开，分别表示 水平和垂直。
(3) 角度值可以为正也可以为负
