CSS核心(day02)

四、转换(☆☆☆☆☆☆☆☆☆☆)
1.什么是转换
改变元素在页面中的位置,大小，角度以及形状
2D 转换 X轴和Y轴上的转行
3D 转换 模拟的,添加了z轴

2.转换的属性
属性： transform：
transform-function 转换函数:
2D：4个
3D：1个

3.2D转换
①位移
transform：translate()
取值 translate(x) 设置在x轴位移
translate(x,y) 设置在x和y轴上的位移
translateX(x) 设置在x轴上的位移
translateY(y) 设置在Y轴上的位移

②缩放，改变元素的大小
transform：scale()
取值 scale(v1) 同时设置X轴和Y轴的大小
scale(v1,v2) 分别设置X轴Y轴的大小
scalex(x) 设置在X轴的大小
scaley(y) 设置在Y轴的大小
取值:
v1>1 放大
0>v1<1 缩小
-1<v1<0 缩小翻转
v1<-1 放大,翻转

③旋转
transform：rotate(ndeg)
取值 rotate(ndeg)
n+顺时针 n-逆时针
转换原点，会影响旋转效果