css3的一些新特性2(2D)

一、2D旋转

1.transfrom:translate  平移

transform
transform：translate(100px,0)
transform:translateX(100px)
transform:translateY(100px)
1.定义2D转换中的移动，沿着x和y轴移动元素
2.translate的最大优点：不会影响到其他元素的位置
3.translate中的百分比单位是相对于自身的元素的translate：（50%，50%）
4.对行内元素没有效果

2.transform:rotate      旋转

transform:rotate(45deg)
动画需要过渡  
过渡写在本身,谁做动画给谁加
transition:all 0.3s
1.rotate里面跟度数，单位是deg比如rotate（45deg）
2.角度为正时，顺时针，负时，为逆时针
3.默认旋转的中心点是元素的中心点

3.transform-origin 中心点

1.可以跟方位名词
transform-origin:left bottom
2.默认的是50% 50%  等价于 center center
3.transform-origin：50px  50px
overflow：hidden（溢出隐藏）

4.transform：scale（x,y）

1.里面写的数字不跟单位 就是倍数的意思 2就是2倍
transform:scale(2，2)
或者transform：scale（2）
transform:scale(0.5)
2.scale的优势之处不会影响其他的盒子 而且可以设置缩放的中心点

5.2D转换的综合写法

transform：translate（）rotate（）scale（）
1.可以同时使用多个转换
2.其顺序会影响转换的效果（先旋转会改变坐标轴的方向）
3.当我们同时有位移和其他属性的时候，记得将位移放在最前面