1. 2D转换
二维坐标系(改变标签在二维平面上的位置和形状的一种技术)
转换(transform)
是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果。
- 移动 :
translate
- 旋转 :
rotate
- 缩放:
scale
移动盒子的位置:①定位 ②盒子的外边距 ③2d转换移动
2.移动
2.1 语法
transform:translate(x,y);
x就是x轴上移动位置,y就是y轴上移动位置,x和y逗号分隔 (如果只移动)transform:translateX(n);
//只移动X方向上的位置 等同于transform:translate(x,0);
transform:translateY(n);
//只移动y方向上的位置 等同于 transform:translate(0,y);
x,y单位:- 像素(100px):往左边、或者下边移动100个像素、
- 百分比(50%): 移动的距离是盒子宽度的一半
2.2 重点知识点
2D
的移动主要是指 水平、垂直方向上的移动translate
最大的优点就是不影响其他元素的位置(定位和盒子的外边距使盒子移动会影响其他元素的位置)translate
中的100%单位,是相对于本身的宽度和高度来进行计算translate
对于行内标签没有效果
2.3 定位显示居中
transform : translate(-50%,-50%);
3. 旋转 --rotate
2D旋转指的是让元素在二维平面内顺时针旋转或者逆时针旋转
3.1 语法
transform :rotate(度数)
单位: deg (不可省略), transform:rotate(45deg);
3.2 重点知识点
rotate
里面跟度数,单位是deg
- 角度为正时,顺时针,角度为负时,逆时针
- 默认旋转的中心点是元素的中心点
3.3 设置元素转换的中心点
语法:transform-origin: x y;
① 注意后面的参数 x 和 y 用空格隔开
②x y 默认旋转的中心点是元素的中心 (50% 50%),等价于 center
center
③还可以给 x y 设置像素或者方位名词(top
、bottom
、left
、right
、center
)
④可以是px像素
4. 缩放 --scale
可以让元素进行放大和缩小。
4.1 缩放语法
语法:transform.scale (x ,y );
4.2 知识要点
注意,x 与 y 之间使用逗号进行分隔
里面写的是数字,不跟单位。就是倍数的意思。
transform: scale(1, 1)
: 宽高都放大一倍,相当于没有放大transform: scale(2, 2)
: 宽和高都放大了二倍transform: scale(2)
: 如果只写了一个参数,第二个参数就和第一个参数一致:等比例缩放transform:scale(0.5, 0.5)
: 缩小scale
最大的优势:可以设置转换中心点缩放,默认以中心点缩放,而且不影响其他盒子;可以设置中心点transform-origin: x y;
5. 转换综合
知识要点:
1.同时使用多个转换,其格式为 transform: translate() rotate() scale()...
等
2.顺序会影响到转换的效果(先旋转会改变坐标轴方向)
3.但我们同时有位置或者其他属性的时候,要将位移放到最前面