CSS 2D3D变换

1.2d位移
2d位移可以改变元素的位置。具体使用方法如下
1.先给元素添加转换属性transform
2.编写transform的具体值
translate() translateX() translateY() 可以写长度值，百分比，百分比是相当于自身的长宽。

1.位移与相对定位相似，都不脱离文档流。不会影响其他元素。
2.位移对行内元素无效
3.位移配合定位可以实现水平居中

  .box{
    position:absolute;
    left:50%;
    top:50%;
}

2.2D缩放
transform:scale();
0.5缩小 1 不变 1.5放大 倍数关系。
scale()只写一个值表示X,Y同时缩放。
3.2d选转
transform:rotateZ(-30deg);//逆时针30度
transform:rotateZ(30deg);//顺时针30度
4.2D扭曲
transform:skew();
5.多重变换
transform:translate(30px) scale(0.5) rotateZ(30deg);
把旋转放在最后，旋转会改变坐标系。
6.设定原点。
transform-origin:left top;
关键字，一个是对应轴，另一个值取该轴中点。如left 就是左边中点为原点。两个值就是对应的点。
像素值一个值表示横坐标，纵向取50%