2D变化（位移、缩放、旋转、扭曲、多重变换、变换原点）
1.2D位移
2D 位移可以改变元素的位置，具体使用方式如下:
先给元素添加转换属性 transform
编写 transform 的具体值，相关可选值如下:
translateX 设置水平方向位移，需指定长度值;若指定的是百分比，是参考自身宽度的百分比.
translateY 设置垂直方向位移，需指定长度值;若指定的是百分比，是参考自身高度的百分比。
translate 一个值代表水平方向，两个值代表: 水平和垂直方向。
3.注意点
1、位移与相对定位很相似，都不脱离文档流，不会影响到其它元素。
2、与相对定位的区别: 相对定位的百分比值，参考的是其父元素，定位的百分比值，参考的是其自身。相对定位可以让一个元素变成另外一个元素的包含块
3、浏览器针对位移有优化，与定位相比，浏览器处理位移的效率更高。
transform 可以链式编写，例如:，
transform: translateX(38px) translateY(48px);
位移对行内元素无效
6、位移配合定位，可实现元素水平垂直居中
position : absolute: //必须要开启绝对定位
left: 50%;
top: 50%;
transform: translate(-50%，-50%);
transform:translateX(30px) translateY(30px); X和Y方向上的唯一都会显示
transform:translateX(30px);
transform:translateY(30px); //分开写的话，写在下面的会把写在上面的覆盖掉
下面的translateY会把translateX覆盖掉，就只有translateY没有translateX了
水平垂直居中的方法二：
inner2 (
width: 60px;
height:60px;
background-color:orange;
position: absolute; //必须要开启绝对定位
top: 50%;
left: 50%;
margin-left:-30px;
margin-top:-30px;
2D缩放
缩放是指:让元素放大或缩小，具体使用方式如下
1先给元素添加转换属性 transform
2编写transform 的具体值，相关可选值如下:
缩放不对行内元素起作用
缩放的书写方式和平移一样
店
scaleX 设置水平方向的缩放比例，值为一个数字，1 表示不缩放，大于 1 放大，小于 1 缩小
scaleY 设置垂直方向的缩放比例，值为一个数字，1 表示不缩放，大于 1 放大，小于1 缩小
scale
同时设置水平方向、重直方向的缩放比例
一个值代表同时设置水平和垂直缩放;两个值分别代表:水平缩放、垂直缩放。
注意点:
scale 的值，是支持写负数的，但几乎不用，因为容易让人产生误解.如果值是负数，会发生镜像翻转，本来是靠近左边的整正常的图像，会变成靠近右边的镜像翻转的图像。
借助缩放，可以实现小于12px的文字
translate 一个值代表水平方向，两个值代表: 水平和垂直方向。
2D旋转 rotate
transform：rotate(30deg) rotate写一个值的时候，默认是rotateZ
2D 旋转是指:让元素在二维平面内，顺时针旋转或逆时针旋转。
具体使用方式如下:
1先给元素添加转换属性 transform
2编写 transform 的具体值，相关可选值如下:
rotate 设置旋转角度，需指定一个角度值( deg )，正值顺时针，负值逆时针。
注意: rotateZ(20deg) 相当于 rotate(20deg)，当然到了3D变换的时候，还能写: rotate(x,x,x)
4.2D扭曲(了解)
2D 扭曲是指: 让元素在二维平面内被"拉扯"，进而"走形"实际开发几乎不用，了解即可，具体使用方式如下:
1，先给元素添加转换属性 transform
2、编写 transform 的具体值，相关可选值如下:
skewX 设置元素在水平方向扭曲，值为角度值，会将元素的左上角、右下角 拉扯。
skewY 设置元素在垂直方向扭曲，值为角度值，会将元索的左上角、右下角 拉扯。
skew 一个值代表 skewX，两个值分别代表: skewX 、 skewY
多重变换
transform:translate(100px,100px) scale(0.5);
transform:translate(100px,100px) rotate(30deg);
transform:rotate(30deg) translate(100px,100px);
//顺序不一样，导致最后旋转的中心点不一样
多重变换
多个变换，可以同时使用一个transform 来编写。
transform:translate(-50%，-50%) rotate(45deg);
注意点:多重变换时，建议最后旋转。
变换原点
位移一直是相对于坐标远点移动的。
元素变换时，默认的原点是元素的中心，使用 transform-origin 可以设置变换的原点。
修改变换原点对位移没有影响，对旋转和缩放会产生影响。
如果提供两个值，第一个用于横坐标，第二个用于纵坐标。
如果只提供一个，若是像素值，表示横坐标，纵坐标取 50%;
若是关键词，则另一个坐标取 50%
transform-origin:50% 50%;表示转换的原点位于元素中心。具体来说，第一个50%表示原点位于元素水平中线，第二个50%表示原点位于元素垂直中线。例如，当你对一个元素应用旋转转换时，该元素会围绕其中心点旋转。
如果是位移的话，百分比是相对于元素自身的百分比。
transform-origin: left top ，变换原点在元察的左上角。
transform-origin: 50px 50px ，变换原点距离元素左上角 50px 50px 的位置
transform-origin: 0，只写一个值的时候，第二个值默认为 50%。
变换原点的属性值可以写（关键字，像素值，百分比）。
变换原点的位置对旋转、缩放有影响，对位移没有影响
可以通过关键字、像素值、百分比来调整变换原点
transform-origin:top; //只给一个值
transform-origin:right top; //给两个值