css3
2D转换
transform是css3中具有颠覆性的特征之一，可以实现元素的位移 旋转 缩放
移动 translate
旋转 rotate
缩放 scale


移动 translate
语法：transform:translate(x,y)
或者：transform:translateX(n);
transform:translateY(n);

translate最大的优点 不会影响其他盒子
translate 中的百分比单位是相对于自身元素translate（50%，50%）
对行内标签没有效果


旋转 rotate
语法：transfomr:ratate(度数)
rotate里面跟度数。单位是deg，比如 rotate(45deg)
角度是正时，顺时针；负时，逆时针
默认旋转的中心点时元素的中心点
旋转中心点 transform-origin:x y
注意后面的参数用空格隔开 xy默认的旋转中心点时元素的中心点50% 50%
还可以给xy设置像素或者方位名词

缩放 scale
语法 transform:scale(x,y);

/* 1.里面写的数字不跟单位 就是倍数的意思 */
/* transform: scale(2, 2); */
/* 2.宽度原来的2呗 高度不变 */
/* transform: scale(2, 1); */
/* 3.等比例缩放 同时修改了宽度和高度， 以下是宽度修改了2倍 高度默认和第一个参数一样 */
/* transform: scale(2); */
/* 4.可以进行缩小 小于1 就是缩放 */
/* transform: scale(0.5, .5) */
/* 5.scale的优点 ：不会影响其他盒子 可以设置缩放的中心点*/


2d转换的综合写法
1.同时使用多个旋转 其格式为：transform:translate() rotate() scale();
2.其顺序会影响旋转的效果，先旋转会改变坐标轴的方向
3.当我们同时有位移和其他属性的时候，记得要将位移放在最前面