2D转换transform

2D转换transform

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

转换(transform)可以简单理解为变形

1、移动(translate)

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

源代码

 

 

语法：

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

transform: translateX(n);

transform: translateY(n);

重点：

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

2、旋转(rotate)

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

源代码

 

 

语法：

transform: rotate(度数);

重点：

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

3、中心点(transform-origin)

我们可以设置元素转换的中心点

源代码

 

 

 

语法：

Transform-orgin: x y;

重点：

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

4、缩放(scale)

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

源代码

 

 

语法：

transform: scale(x,y);

重点：

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

5、转换综合写法

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