H5C3新特性总结(三)

一.跟目标元素有关的拖拽事件

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为主轴，起点和终点会调换 一般不会用