CSS3 2D转换

转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果，可以理解为简单的变形。

---

1. 位移(translate)

可以改变元素在页面中的位置，类似定位

---

优点：不会影响其他元素的位置。

语法：
transform：translate(x,y);
或者可以分开写
transform：translateX(x);
transform：translateY(y);

注意：

• 对行内元素没有效果
• 其中的x,y分别表示在x方向与y方向上的位移量
• x y用空格隔开
• x,y可以为：

1. 准确的像数值
2. 也可以为百分数（相对于元素本身的百分比大小）

2. 旋转(rotate)

可以让元素顺时针或逆时针旋转

---

语法：
transform：rotate(度数);

注意：

• 度数，单位是deg，如transform：rotate(90deg);
• 角度大小为正，顺时针；为负，逆时针。
• 默认旋转的中心点是元素的中心点。

3. 缩放(scale)

可以让元素放大或缩小

---

语法：
transform：scale(x,y);
此时x,y代表元素在x,y方向上分别缩放为原来的x倍和y倍。

transform：scale(n);
此时代表元素等比例缩放为原来n倍

注意：

• x y用逗号分离
• 默认缩放的中心点是元素的中心点。
• 可以设置转换的中心点

** 设置转换中心点(transform-origin)**

前面旋转和缩放都提到了设置中心点，其实是通过设置transform-origin值实现的。

---

语法：
transform-origin:x y;

注意：

• x y用空格隔开
• 可以给x y设置橡素值，代表元素中心点相对于元素的位置。
• 可以给x y设置百分数
• 可以设置方位名词（top left bottom right center），比如 transform-origin:left bottom 就是设置元素中心点在元素的左下角。