前端学习笔记：CSS3之2D转换transform

2D 转换transform

• translate(x, y) 移动（位移）
• rotate(度数) 旋转
• sacle(x, y) 缩放
• 设置转换中心点 transform-origin: (x y);

一、移动translate

改变元素在页面中的位置，类似定位。
1.语法

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

2.重点

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

二、旋转rotate

让元素可以在平面内顺时针旋转或者逆时针旋转
1.语法

transform: rotate(度数deg);

2.重点

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

三、缩放scale

缩小和放大
1.语法

transform: scale(x, y);

2.重点

• x和y之间是用逗号,分隔的
• transform: scale(1,1); 宽和高都放大了原来的一倍，相当于没放大
• transform: scale(2,2); 宽和高都放大了原来的2倍
• transform: scale(2); 等价于transform: scale(2,2);
• transform: scale(0.5,0.5); 缩小
• 参数为负值时，先缩小后放大
• sacle缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

四、转换中心点 transform-origin

设置元素的转换中心点

1.语法

transform-origin: (x y);

2.重点

• 参数用空格隔开
• 默认的转换中心点是元素的中心点transform-origin: (50% 50%)
• 还可以给x y设置像素 或者 方位名词（top bottom left right center）
  例如：transform-origin: (left bottom)；设置左下角为转换中心点

小结：2D转换综合写法，要把位移放在最前面！