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);
类似的，还有 rotateY( ); rotateZ( );
总之，以上2D转换的效果都有相应的3D转换，比如3D旋转，平移，缩放。
设置视野距离:
perspective: 200px;