空间位移
Z轴
1.Z轴的正方向为屏幕到人的眼睛的方向；
2.Z轴取值跟XY一样，像素和百分比，当取值为百分比时候也是参照自身作位移
3.Z轴语法：transfom：translateZ(300px);
或 transform:translate3d(100px,100px,300px);
4.translate后面没有3d，是不可以有3个值，即为XY值，translate3d才有XYZ值
5.网页默认显示是2d的，看不到3d效果的
Perspective视距
1.透视，视距，景深 设置给使用了3d元素的最近一级的父元素（亲爸爸）
2.添加视距 取值范围：400~1200px pp
3.视距理解：其实就是安排了一直眼睛，然后眼睛到屏幕的距离就是视距
4.近大远小：像素越大，代表屏幕离眼睛越近，图片在浏览器就呈现放大；像素越小，代表屏幕离眼睛越远，图片在浏览器就呈现缩小。
空间旋转
Z轴
1.顺时针旋转，rotate（360deg）和rotateZ（360deg）等价
transform：translateZ(360deg);和transform:translate(360deg)效果一样
2.逆时针旋转，rotate（-360deg）和rotateZ（-360deg）等价
transform：translateZ(-360deg);和transform:translate(-360deg)效果一样
X轴，Y轴
1.X轴旋转180deg，当加上视距后perspective后，后出现图片垂直镜像；
2.Y轴旋转180deg，当加上视距后perspective后，后出现图片水平镜像；
3.在立体空间中，1个点和1条线是不占据位置大的，所以当旋转X或Y轴旋转90度，图片会消失
3D导航栏
当cursor hover到的首页,登录,注册等盒子时,绿色盒子会进行翻转为橙子的index,login,register盒子
1.根据case,写出静态布局
a.一个30040大盒子位于浏览器垂直50px且水平居中位置;
b.大盒子内有ul>li3>a*2----即3个li盒子包着2个a标签;
c.分别在各个a标签填充上内容:首页 index 登录 login 注册 register;
d.把li盒子的布局填充进大盒子;
2.进行3D布局,让橙色的盒子覆盖住绿色的盒子 ;
a,让橙子盒子沿着Y轴正方向平移60px ;
b,同时沿着X轴正方向旋转90度,让index盒子和首页盒子呈现立体T字状,可以开启上帝上角查看两个盒子状态;
d. /* 开启3d /
transform-style: preserve-3d;
/ 开启上帝视角，通过旋转(ps) */
transform: rotateX(-20deg) rotateY(30deg);
3.然后让绿色盒子沿着Z的正方向平移橙子盒子的一半;
4.同过鼠标悬停,让index橙色盒子旋转回原来的位置覆盖绿色盒子
左手法则:左手大拇指所指向的方向为旋转轴心,四指所曲方向为旋转方向
动画
动画实现步骤
1.定义动画：让宽度从200变大到600
a. @keyframes(关键帧) 动画名称(自定义) {
初始状态
from {width:200px;}
结束状态
to {width:600px;}
}
b.在要实现动画效果的盒子里面条用动画animation
animation:动画名称(已自定义好的名字) 动画时长(秒数);
2.定义动画 百分比可以实现阶段性的动画
a. @keyframes(关键帧) 动画名称(自定义) {
初始状态
0%{width:200px;height:100px:}
中间状态
50%{width:500px;height:300px;}
结束状态
100%{width:800px;height:500px;}
}
b.在要实现动画效果的盒子里面条用动画animation
animation:动画名称(已自定义好的名字) 动画时长(秒数);
3.note first:
a.动画的名称不能重复;
b.可参与过渡的css属性都可以参与动画;
c.动画的名称不能为running, 因为它是关键词,vscode的固有代码
d.如果调用该动画的盒子样式和动画初始状态是一样的话,初始状态可以不写
4.note second:
调用动画:animation: name duration timing-function delay iteration-count direction fill-mode;
a.名字:(自定义)
b.期间/动画时长:2s
c.计时功能:linear(匀速) 或者steps(次数):逐帧动画
d.delay:延迟时间：动画开始之间要等待的时间 s/ms
e.iteration-count:动画播放次数：infinite 无限次播放
f:direction:动画播放方向：alternate(反方向)交替播放
g:fill-mode:执行完毕时状态-------forwards:(最后一帧)动画停止在结束时的状态; backwards(第一帧)
速度曲线：默认 ease； 1. linear 匀速播放 2. steps(次数)一般配合精灵图使用
执行完毕时的状态：forwards 动画会停在动画结束时的状态；
注意点：
动画名称和播放一次动画的时长必须写，其他属性需要就写
forwards不能和infinite结合使用，否则不生效
animation 里面属性值 不分先后顺序
当属性值里有两个时间，第一个时间永远表示动画时长，第二个表示等待时间
精灵动画案例
1.打开图片资源,查看UI给出的图片;
2.计算共有多少个动作,一个动作为一帧;
3.按上述计算出第一帧的盒子宽高为140*140,插入背景图片,即可在浏览器实现一个动作
