# CSS3 2D 转换

转换 (transform) 是 CSS3 中具有颠覆性的特征之一，可以实现元素的位移，旋转，缩放等效果

移动 : translate
旋转 : rotate
缩放 : scale

# 2D 转换之移动 `translate`

2D 移动是 2D 转换里面的一种功能，可以改变元素再页面中的位置，类似定位 ==

语法 :

1
2
3

transform: translate(x, y); /*或者分开写*/
transform: translateX(n);
transform: translateY(n);

重点 :

定义 2D 转换中的移动，沿着 X 和 Y 轴移动元素
translate 最大的优点：不会影响其他元素的位置
translate 中的百分比单位是相对于自身的 translate: (50%, 50%);
对行内标签没有效果

# 2D 转换之旋转 `rotate`

2D 旋转指的是让元素再二维平面内顺时针旋转或者逆时针旋转

语法 :

1	transform: rotate(度数)

重点 :

rotate 里面跟度数，单位是 deg, 比如 rotate (45deg)
角度为正时，顺时针，负时，为逆时针
默认旋转的中心点是元素的中心点

# 2D 转换中心点 transform-origin

语法 :

1	transform-origin: x y;

重点 :

注意后面的参数 x 和 y 用空格隔开
x y 默认转换的中心点是元素的中心点 (50% 50%)
还可以给 x y 设置像素或者方位名词 (top bottom left right center)

# 2D 转换之缩放 scale

缩放，顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小

语法 :

1	transform: scale(x, y);

** 注意 : **

注意其中的 x 和 y 要用逗号分隔
transform: scale (1,1) : 宽和高都放大一倍，相当于没有放大
transform: scale (2,2) : 宽和高都放大了两倍
transform: scale (2) : 只写一个参数，第二个参数则和第一个参数一样，相当于 scale (2,2)
transform: scale (0.5, 0.5) 缩小
scale 缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

# 2D 转换综合写法

** 注意 : **

同时使用多个转换，其格式为 : transform: translate () rotate () scale () … 等
其顺序会影响转换的效果。线旋转会改变坐标轴方向
当我们同时有位移和其他属性的时候，记得要将位移放到最前面