第三天

rotateX()沿着x轴旋转，
perspective:视距，给父元素加，视距越小，展示效果越明显  眼睛到物体的距离
translateZ()物体往屏幕方向移动的距离,translateZ()越大，看到的物体越大，translateZ()为负值，距离眼睛越来越远，物体越来越小，不能用百分比

transform-style:perserve-3d; 给父亲添加，让子盒子在父盒子中有相对的旋转空间。
 transform-style:  flat;  平面模式  -  不开启3维立体环境; preserve-3d;  3维立体环境;

设置动画名：animation-name:xxx;

设置动画播放的持续时间  animation-duration:3s

设置动画的速度曲线：animation-timing-function:linear 匀速; ease： 慢-快-慢  默认值；ease-in： 慢-快；ease-out： 快-慢；ease-in-out： 慢-快-慢；

动画播放延迟时间animation-delay: 0s;

设置动画播放的循环次数  animation-iteration-count: 2;  infinite 为无限循环

animation-direction: alternate    来回交替

动画等待或者结束的状态

设置动画在等待或者结束的时候的状态 animation-fill-mode : forwards：动画结束后，元素样式停留在 100% 的样式;
 backwards： 在延迟等待的时间内，元素样式停留在 0% 的样式;
 both： 同时设置了 forwards和backwards两个属性值;

控制 播放/暂停 animation-play-state   
:running 播放 ;paused 暂停

animation:动画名称 动画时间 运动曲线 何时开始  播放次数  是否反方向   动画等待或者结束的状态;
section:大盒子，等同于div
动画：无需触发直接执行，过渡需要触发才执行
动画 :要设置关键帧

    div {    
     animation-name: la;
     animation-duration: 2s;
     }
     @keyframes la{
         0%{
            transform:translate(0,0);
         }
         100%{
            transform:translate(500px,600px);
         }
     }  
    @keyframes la{
        from{
            transform:translate(0,0);
        }
        to{
            transform:translate(500px,600px);
        }
    }
    公共样式：总是后面覆盖前面的
    div {
    transform:rotate(30deg);
        }
    div nth-child(1){
transform: rotate(30deg) translateX(300PX);
    }
translateY(-50%) 反向走一半 translateY(-100%)反向走自身的长度
transition:step()
js中  s.style.transform='rotate('+(ss*6)+'deg)',加引号
获取当前时间   var date=new Date();
获取当前毫秒数 var haomiao=date.getMilliseconds();
获取当前的秒数 var ss=date.getSeconds();
获取当前的分钟数 var mm=date.getMinutes();
获取当前的小时数 var hh=date.getHours()；
1分 1秒：表盘旋转6度 1小时：旋转30度；
不需要无限循环，删掉无限循环
多列布局：cloumn-count:分列数；
    cloumn-rule:dashed 3px red;设置分割线 
        cloumn-gap：设置列间隙l
        cloumn-width：设置宽度；取大优先
如果人为设置宽度更大,就选择人为设置的宽度，如果默认宽度大，就选择默认宽度
    cloumn-span:规定元素应该横跨多少列（n指横跨n列);
应用：瀑布流的做法