转换可以实现元素的位移、旋转、缩放等效果
2D转换
- translate --- 移动
- rotate --- 旋转
- scale --- 缩放
1.translate
语法：(px)
transform:translate(x,y);
transform:translateX(n);
transform:translateY(n);
不会影响其他元素的位置 （会变成前后关系）
transl对于行内元素无效 —— 先转换为行内块元素后即可使用
2.rotate
语法:（deg）
transform:rotate(度数);
正数是顺时针，负数是逆时针
--过渡--
动画从一个状态过渡到另一个状态
谁变化，给谁加
语法：
transition:要过渡的属性 花费时间 运动曲线 何时开始
| 属性 | 宽度、高度、背景颜色、内外边距等等（所有就用all） |
| 花费时间 | 单位：秒 |
| 运动曲线 | 默认：ease（速度变慢） linear（匀速）ease-in（加速）ease-out（减速） ease-in-out（先加速后减速） |
| 何时开始 | 单位：秒 设置延迟时间 默认：0 |
3.设置转换的中心点
语法：
transform-origin:x y;
若：transform-origin:50% 50%; 则绕中心旋转
4.scale
语法：
transform:scale(x,y); <其中的数字是放大的倍数>
默认从中心点缩放 ，不影响其他盒子
综合写法顺序
语法：
transform:translate(x,y) rotate(度数) scale(x,y);
3D转换
x轴：水平向右
y轴：垂直向下
z轴：垂直屏幕向外
1.3D位移
语法：
transform:translateX(100px)：仅仅是在X轴上移动
transform:translateY(100px)：仅仅是在Y轴上移动
transform:translateZ(100px)：仅仅是在Z轴上移动
transform:translate3d(x,y,z)
2.3D转换 （透视perspective ）
透视要写在被观察元素的父盒子上面
3.3D旋转
语法：
transform:rotateX(35deg)：沿着X轴正方向旋转45°
transform:rotateY(35deg)：沿着Y轴正方向旋转45°
transform:rotateZ(35deg)：沿着Z轴正方向旋转45°
transform:rotate3d(x,y,z,deg)
4.3D呈现 （transform-style）
控制子元素是否开启三维立体环境
- transform-style：flat （默认） 子元素不开启
- transform-style：preserve-3d 子元素开启
- 写给父级