CSS3之2D转换transform

1、2D转换translate

transform:translate(20px,30px)向右平移20px，向下平移30px，在浏览器中，y轴越往下越大，x轴越往右越大。

translateX、translateY，如果写translate(20px),默认x,y方向都平移20px。

之前让一个子盒子在父盒子里面垂直水平居中，先子绝父相，然后top:50%,left:50%，意思是先走父盒子宽度和高度的一半，然后再利用margin值，往上和往左走子盒子高度和宽度的一半。

现在有了translate，就可以不用margin值了，可以采用transform:translate(-50%,-50%)，这样也是走子盒子宽度和高度的一半。

括号里面是百分比的时候，对行内标签没有作用。行内标签没有宽度和高度。

注意：（x,y）括号中用逗号隔开的

最大的优点是不会影响其他盒子。

2、旋转rotate

transform:rotate(45deg)，单位是deg，正值表示顺时针旋转，负值表示逆时针旋转。

3、缩放scale

transform:scale(1.4)只写一个默认宽度和高度同样的操作。小于1就是一位，里面不加单位。是倍数的意思。

scale(x,y)中间逗号隔开。

为什么要缩放？直接修改宽度和高度会把周围的盒子冲走，缩放不会影响其他的盒子，而且可以设置缩放的中心点。

transform-origin:left center以左下角为中心进行缩放。

4、综合写法以及顺序问题

transform:translate() rotate() scale()等，这个顺序会改变选择的效果。

如果有其他属性要先写位移，如果先旋转的话坐标轴的位置会改变。