一.跟目标元素有关的拖拽事件
1.ondragenter：代表有元素拖进来触发，只触发一次，进来一次触发一次
2.ondragleave：代表有元素从我这离开触发，只触发一次，出去一次触发一次
3.ondragover： 代表有元素在我的范围内不断触发（一般用这个事件只是为了配合ondrop使用，在里面阻止事件默认行为让元素允许能被拖进来）
4.ondrop：有元素拖拽到我的范围内松手触发的事件。但是这个事件要想能被触发，必须先写ondragover事件，并且再over事件里阻止事件默认行为
二.3维坐标系
X:水平的轴;
Y:垂直的轴;
Z:前后的轴.
下面给一张形象图来说明:(网格代表电脑屏幕)
三.3维旋转
3维旋转的效果图如下:
它各自的介绍如下:
X轴旋转：上下旋转，想到单杠,格式:rotateX(度数)
Y轴旋转：左右旋转，想到钢管舞,格式:rotateY(度数)
Z轴旋转：顺时针或者逆时针旋转，想到大风车,格式:rotateZ(度数)
使用案例:transform: perspective(300px) rotateX(45deg);
perspective是设置视距,如果想要效果明显一点就要加一个视距，而且视距遵循近大远小的特点，距离越近，效果越明显，距离越远效果越不明显.
视距总结：以后视距要加在父元素身上会更像真实看到的场景
四.3维平移
x轴:左右走;
y轴:上下走;
z轴:前后走;
使用案例:transform: translateX(100px);向x轴平移100px
五.transform-style属性
默认没有开启3d立体显示,所以要给这个属性,并且给一个值:preserve-3d;
六.animation属性:
使用案例:
animation: bigger 1s 0.5s linear 2 forwards alternate running;
解释:
参数1：剧本的名字（动画名）
参数2：动画时长
参数3：延迟时间
参数4：运动曲线 linear匀速 steps()分步骤
参数5：动画次数，如果为infinite代表无限次
参数6：默认动画结束后会复原，forwards代表停留在动画最终效果上
参数7：如果动画次数有N次的时候，在动画完了进行下一次动画之前会闪现回原来的样子没有动画效果
加一个alternate可以让复原时也有动画效果，但是它会占用动画次数
参数8：代表动画播放状态，默认是running（播放动画）
以上参数不用特意去记顺序，因为它们随便写顺序都可以，但是先写的时间一定是动画时长，后写的是延迟时间
因为它们没有顺序，所以以后需要什么效果，想到什么就写什么
例如：我想无限，我就写一个infinite
我想复原时也有动画，就写一个alternat
reverse：代表反转（先闪现到动画最终样子，然后用动画效果复原到自己本身的值）
alternate-reverse：还是反转，只是如果有多次动画，返回时也会有动画效果
normal：默认值，就是动画该怎样就怎样，相当于你没写参数
我想最终停在动画最终的效果，就写一个forwards
总结四个特殊单词:
alternate:代表让元素复原时也有动画， 它占用一次动画效果
forwords：停在动画最终效果上
running:默认值，播放动画
paused：暂停动画
七.弹性布局
弹性布局：会让子元素在主轴方向依次排列
弹性布局设置操作:
display: flex;
下面解释各自属性
justify-content:设置元素在主轴方向的排列方式
flex-start:在主轴起点对齐
flex-end：在主轴终点对齐
center：在主轴居中
space-around：元素和元素之间有间距，两边也有间距
space-between：元素和元素之间有间距，两边没有间距
flex-direction：设置主轴为哪个轴
row：默认值，代表x轴为主轴
column：代表y为主轴
row-reverse：还是以x为主轴，起点和终点会调换 一般不会用
column-reverse：还是以y为主轴，起点和终点会调换 一般不会用