CSS3里的2D/3D 转换

2D转换

通过 CSS3 转换，能够对元素进行移动、缩放、转动、拉长或拉伸。

1.旋转,deg表示角度。负的为逆时针转动，默认沿着中心点旋转。可以利用 transform-origin 设置旋转原点。

transform: rotate(30deg);

2.用来设置变形原点，变形时以这个点为基准点，默认为50% 50%。

transform-origin: 100% 0;

3.平移变形，两个参数分别为横向偏移量和纵向偏移量。偏移量也可以是百分比,表示偏移相对自身尺寸的百分比。

transform:translate(50%,50%); 

通过这个属性可以使元素水平和垂直居中：

position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);

4.缩放变形，两个参数分别表示横向缩放量和纵向缩放量，小于1表示缩小，大于1表示放大，总之缩放之后为原尺寸的多少倍 ，变形会使元素中的内容也变形。

transform: scale(1.3,1.3);

3D转换

沿X轴旋转 :

transform: rotateX(-180deg);

perspective: 200px;