【前端学习-03】CSS3之2D转换/移动/旋转/缩放

2D转换

实现元素（盒子）的位移、旋转、缩放
2D转换:改变标签在二维平面上的位置和形状的一种技术，与数学的坐标轴不一样

1.2D转换移动Translate

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

语法：transform:translate(x,y)
X为x轴上移动的位置，Y为Y轴移动位置

若只移动X轴或Y轴，Y不能省略

1. transfrom：translate(100px,0px)
2. transfrom:translateX(100px)
3. transfrom:translateY(100px)
4. 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.优势：不会影响其他盒子，而且可以设置缩放的中心点
案例①：图片放大

案例②：分页按钮

2D转换综合写法