2D变形(CSS3) transform
transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式
变形转换 transform transform 变换 变形的意思
移动 translate(x, y)
1. 2D移动是2D转换里面的 一种功能，可以改变元素在页面中的位置，类似定位
translate 移动平移的意思
translate(50px,50px);
使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。
可以改变元素的位置，x、y可为负值；
ranslate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动） translateX(x)仅水平方向移动（X轴移动） translateY(Y)仅垂直方向移动（Y轴移动）
2.重点
- 定义2D转换中的移动，沿X轴和Y轴移动元素
- translate最大的优点：不会影响到其他元素的位置
- translate中的百分比单位是相对自身元素的translate:(50%,50%);
- 对行内标签没有效果
.box { width: 499.9999px; height: 400px; background: pink; position: absolute; left:50%; top:50%; transform:translate(-50%,-50%); /* 走的自己的一半 */ }
让定位的盒子水平垂直居中
缩放 scale(x, y)
transform:scale(0.8,1);
可以对元素进行水平和垂直方向的缩放。该语句使用scale方法使该元素在水平方向上缩小了20%，垂直方向上不缩放。
scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放） scaleX(x)元素仅水平方向缩放（X轴缩放） scaleY(y)元素仅垂直方向缩放（Y轴缩放）
scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大
注意
- 注意其中的x和y用逗号隔开，不跟单位
- transform:scale(1,1)宽和高都放大一倍，相当于没有放大
- transform:scale(2):只写一个参数，第二个参数则和第一个参数一样，相当于scale(2,2)
- transform:(0.5,0.5):缩小
- scale缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子
旋转 rotate(deg)
可以对元素进行旋转，正值为顺时针，负值为逆时针；
transform:rotate(45deg);
注意单位是 deg 度数
重点
- rotate里面跟度数，单位是deg 比如rotate(45deg)
- 角度为正值时，顺时针，负值时为逆时针
- 默认旋转中心点是元素中心点
transform-origin可以调整元素转换变形的原点
重点
- 注意后面的参数x和y用空格隔开
- x y默认转换中心点是元素的中心点(50% 50%)
- 还可以诶x y设置像素或方位名词(top bottom left right center)
div{transform-origin: left top;transform: rotate(45deg); } /* 改变元素原点到左上角，然后进行顺时旋转45度 */
如果是4个角，可以用 left top这些，如果想要精确的位置， 可以用 px 像素。
div{transform-origin: 10px 10px;transform: rotate(45deg); } /* 改变元素原点到x 为10 y 为10，然后进行顺时旋转45度 */
div {
width: 300px;
height: 300px;
margin: 200px auto;
background-color: pink;
transition: all 0.5s;
/* 改变中心点 */
transform-origin: top left;
}
div:hover {
/* 顺时针旋转 */
transform: rotate(180deg);
}
倾斜 skew(deg, deg)
transform:skew(30deg,0deg);
该实例通过skew方法把元素水平方向上倾斜30度，处置方向保持不变。
可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。
2D转换综合写法
注意：
- 同时使用多个转换，格式为：transform:translate() rotate() scale() …等
- 其顺序会影响转换效果。（先旋转会改变坐标轴方向）
- 当我们同时又位移和其他属性时，记得将位移放到最前面