CSS3 2D转换

一、transform

1.transform：translate();

translate最大的优点就是不会影响其他元素的位置。对行内标签没有效果！

translate(x，y) 

translateX()

translateY()

translate(50%,50%)移动的距离是盒子本身的一半

2.transform：roate(度数);

单位是deg

正值是顺时针

负值是逆时针

3.transform-origin：x y; 

注意x y之间是空格不是逗号

默认是中心点，等价于 center  center

x y可以给像素也可以给方位名词（top bottom left right）

4.transform：scale(x,y)

里面写的数字不跟单位 就是倍数的意思 1 就是1倍  2就是 2倍

scale 的优势之处： 不会影响其他的盒子 而且可以设置缩放的中心点

2D转换综合书写顺序

我们同时有位移和其他属性，我们需要把位移放到最前面

transform: translate(150px, 50px) rotate(180deg) scale(1.2);