CSS3:2D转换

2D转换之移动translate（很方便！！）

：
语法：

1. transform：translate（x，y）前进x像素X轴和前进y像素Y轴（可以为负值）
2. transform：translateX（n)前进X轴n像素
3. transform：translateY（n）前进Y轴

translate的最大好处：不会影响其他元素的位置！！
translate对行内元素没有效果！

水平居中问题：

<div>
	<p></p>
</div>

扩展：关于transition
实例
将鼠标悬停在一个 div 元素上，2s内逐步改变表格的宽度从 100px 到 300px，同样的当鼠标移出时，也会2s内逐步改变表格的宽度从 300px 到 100px

div
{
    width:100px;
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari */
}
div:hover {width:300px;}

2D转换之旋转rotate

• rotate后面跟deg是度数，正数为顺时针，负数为逆时针。并且默认旋转的中心是元素的中心点

转换中心点：transform-origin
**语法：**transfo-origin： x y；（指把转换中心点利用x和y来设置到那个点）
其属性有：

2D转换之放大与缩放（scale）

语法：transform：scale（width，height）
注意：两个参数width和height值的是宽和高的放大倍数。而非指定大小！

• 放大倍数中，1即是放大1倍，即没有放大，所以1以下就是缩小，1以上就是放大
• scale的最大优势：可以设置中心点的放大与缩放，默认是以中心缩放，并且不影响其他盒子！！！

2D转换的综合性写法：

语法：transform后面之间跟方法就行，但是要用空格隔开
注意:写法的顺序会影响转换的效果（旋转之后会改变坐标方向！）
所以一般我们同时有位移和其他属性的时候，要把位移放在最前