第二天
transform属性
空间转换
transform属性
实现元素在空间内的位移、旋转、缩放等效果
空间;是从坐标轴角度定义的。x、y、z三条坐标轴构成的一个立体空间，z轴位置与视线方向相同。
空间转换也叫做3d转换
空间位移：
语法
transform: translate3d(x, y, z);
transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);
取值（正负均可）
像素单位数值
百分比
透视
perspective属性
一定给父亲添加
取值一般在800-1200
空间转换时，为元素近大远小、近实远虚的视觉效果
立体呈现
呈现立体圆形步骤
1.盒子父元素添加transfrom-style:preserve-3d;
2.按需求设置子盒子的位置{位移或旋转}
注意：空间内，转换元素都有自己独立的坐标轴，互不干扰。
想让谁动就给谁加特效
3D导航
使用立体呈现技巧实现3D导航效果
结论： 绿色和橙色部分共需要三个标签
一个父级标签
绿色和橙色共2个标签（子级）-
实现思路：
调节a标签的位置
- a标签定位（子绝父相）
- 英文部分添加旋转和位移样式
- 中文部分添加位移样式
- 过渡效果：鼠标滑过li，添加空间旋转样式
- li添加过渡属性
（注意： 案例完成以后，删除li的空间旋转样式）
空间缩放;
使用scale实现空间缩放的效果
语法：
transform：scaleX（倍数）
transform：scaleY（倍数）
transform：scaleZ（倍数）
transform：scale3d（x,y,z)（倍数）
动画
使用animation添加动画效果
animation：动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态；（animation结合@keyframes使用（引用名字搭配使用）)
1.动画名字参照css类选择器命名
2.动画时长和延迟时间别忘了带单位
3.infinate无限循环动画（重复次数)
4.alternate为反向就是左右来回执行动画（跑马灯）
5.forwards动画结束停留在最后一帧状态，不循环状态使用
6.linear 让动画匀速执行
总结：
body里面写；perspective（让3d效果看的更加清晰，设置距离多少px就是眼睛距屏幕的距离；
让元素3d空间显示使用;transform-style：preserve-3d;
延迟显现：transition
距离平面距离;translate
旋转角度：rotate
（距离必需写在角度前面要不然生成不了）
让盒子结束后停在一个地点：forwards
鼠标经过暂停动画 :animation-play-state: paused;
逐帧动画：steps
给那个盒子动画指令：animation那个盒子就会跟随者一起动，边框线border，所以要给到下一级
填充（充满页面）
transform-origin:原点水平位置、原点垂直位置
旋转法则：左手法则{
X轴手背向上
Y轴手背向内
顺时针转动
旋转方法展示:
