366节---------5月4日

2D转换

可以实现元素的位移、旋转、缩放等效果

• 移动：translate
• 旋转：rotate
• 缩放：scale

移动translate

语法：

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

重点：

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

---

旋转rotate

让元素在2维平面内顺时针旋转或者逆时针旋转

语法：

transform: rotate（度数）

重点：

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

---

2D转换中心点transform-origin

语法：

transform-origin:x y;

重点:

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

---

缩放scale

语法：

transform:scale(x,y);

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

---

2D转换综合写法

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