2D转换
实现元素(盒子)的位移、旋转、缩放
2D转换:改变标签在二维平面上的位置和形状的一种技术,与数学的坐标轴不一样
1.2D转换移动Translate
改变元素在页面中的位置,类似定位。
语法:transform:translate(x,y)
X为x轴上移动的位置,Y为Y轴移动位置
若只移动X轴或Y轴,Y不能省略
- transfrom:translate(100px,0px)
- transfrom:translateX(100px)
- transfrom:translateY(100px)
- transfrom:translateY(20%):相对于自身宽高来说
5. 居中写法: transfrom:translate(-50%,-50%):盒子往上走自己高度的一半
移动盒子位置方法:
1.定位 2.盒子外边距 3.2d转换移动
特点:
行内:span
2.2D转换之旋转Rotate
3.案例①:
**案例②:
**
当鼠标放上去时,三角旋转255度
3.2D转换中心点transorm-origin
transform-oringin:x y;
案例③:
4.2D转换之缩放scale
transform:scale(x,y)
里面写的数字不限单位,就是倍数的意思,1就是1倍,2就是2倍
1.transform:scale(2,1):宽度变为原来2倍,高度不变
2.transform:scale(2):等比例缩放,同时修改宽高
3.transform:scale(0.5,0.5):进行缩小,小于1就是缩小
4.优势:不会影响其他盒子,而且可以设置缩放的中心点
案例①:图片放大
案例②:分页按钮