平面转换
整体认识
div {
margin: 100px 0;
width: 100px;
height: 100px;
background-color: pink;
transition: all 1s;
}
div:hover {
transform: translate(800px) rotate(360deg) scale(2) skew(180deg);
}
作用：为元素添加动态效果，一般与过渡配合使用
概念：改变盒子在平面内的形态（位移、旋转、缩放、倾斜）
平移
案例展示：通过平移实现"居中"效果
（原理：利用 transform: translate(); 取值为百分比时候，是参照盒子自身尺寸计算结果的特点）
"box">
属性：
transform: translate(X轴移动距离，Y轴移动距离);
取值：
1.像素单位数值
2.百分比（参照盒子自身尺寸计算结果）
3.正负均可
技巧：
1.translate() 只写一个值，表示沿着X轴移动
2.单独设置X或者Y轴移动距离：translateX() 或 translateY()
旋转
属性：
transform: rotate(旋转角度);
角度单位：deg
技巧：
取值为正，顺时针旋转
取值为负，逆时针旋转
转换原点
"box">
默认情况下，转换原点是盒子中心点
转换原点是一个原点，当发生转换时候（包括旋转、缩放、平移等等），以此为原点进行坐标的定位
属性：
transform-origin： 水平原点位置 垂直原点位置;
取值：
1.方位名词（left、top、right、bottom、center）
2.像素单位数值
3.百分比
多重转换
多重转换的实现：先平移再旋转
transform: translate(...) rotate(...);
缩放
属性：
transform: scale( 缩放倍数 );
transform: scale( X轴缩放倍数, Y轴缩放倍数);
技巧：
通常，只为scale设置一个值，表示X轴和Y轴等比例缩放
通常大于1表示放大，取值小于1表示缩小
倾斜
"box">
属性：
transform: skew(倾斜角度);
渐变
渐变效果
渐变是多个颜色逐渐变换的效果，一般用于设置盒子背景
分类：
1.线性渐变（沿着直线的方向发生渐变）
2.径向渐变（沿着圆心向四周发生渐变）
属性：
background-image: linear-gradient(
渐变方向,
颜色1 终点位置,
颜色2 终点位置,
...
);
取值：
1.渐变的方向：可选择不写
to 方位名词
角度度数
2.终点位置：可选择不写
百分比
背景颜色渐变的案例
径向渐变
"box">
作用：给按钮添加高光效果
取值：
1.半径1条则为圆，2条则为椭圆
2.圆心位置取值：像素单位数值/百分比/方位名词
空间转换
平移
属性：
transform: translate3d(x, y, z);
transform: translateX();
transform: translateY();
transform: translateZ();
取值（正负均可）
1.像素单位数值
2.百分比（参照盒子自身尺寸计算结果）
注意事项：
电脑屏幕是平面的，z轴的效果无法直接体现，所以可以配合"视距"知识点使用
视距
作用：指定了观察者与 z = 0 平面的距离，为元素添加透视效果
透视效果：近大远小
属性：
添加给直接父级，取值范围一般为 800 ~ 1200
perspective: 视距;
平移与视距的综合效果
旋转
属性：
transform: rotateX(角度);
transform: rotateY(角度);
transform: rotateZ(角度);
角度单位：deg
例子：
transform: rotateZ(60deg);
拓展：
rotate3d(x,y,z,角度度数)：用来设置自定义旋转轴的位置及旋转的角度
x,y,z 取值为 0-1 之间的数字
左手法则：根据旋转方向确定取值正负
操作：
左手握住旋转轴，拇指指向正值方向。其他四个手指弯曲方向为旋转正值方向。
立体呈现
立体知识
"cube">
"front">前面
"back">后面
作用：控制元素的子元素是位于3D空间中还是平面中
属性名：transform-style
属性值：
flat: 子级处于平面中
preserve-3d: 子级处于3D空间
立方体案例
"cube">
"flat1">上
"flat2">下
"flat3">左
"flat4">右
"flat5">前
"flat6">后
3D导航案例
缩放
transform: scale3d(x,y,z);
transform: scaleX();
transform: scaleY();
transform: scaleZ();
动画
认识动画
过渡：实现两个状态间的变换过程
动画：实现多个状态间的变换过程，动画过程可控（重复播放、最终画面、是否暂停）
定义动画
使用动画
基本演示
动画一演示：宽度从200变化到800
动画二演示：从 200*100 变化到 300*300 再变化到 800*500
"box">
其他属性值
"box">
animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态
提示：
1.动画名称和动画时长必须赋值
2.取值不分先后顺序
3.如果有两个时间值，第一个时间值表示动画时长，第二个时间值表示延迟时间
走马灯案例
精灵动画案例
多组动画
"./images/img0.png" alt="">