4月8日知识点梳理

回顾：
触发3d空间：
transform-style:preserve-3d
3d功能函数：
3d-位移
3d-旋转
3d-缩放
3d-位移：
translate3d(x,y,z)
translateZ()
3d旋转：
rotateZ();
rotate3d(x,y,z,度数)
注：x y z 一个矢量值 0 不旋转 1 旋转
eg:rotate3d(1,1,0,45deg)
等价于：rotateX(45deg) rotateY(45deg)
3d-缩放：
scaleZ()
scale3d(x,y,z)
让背面不可见：
backface-visibility:hidden;
近大远小 -> 景深
横看成岭侧成峰，远近高低各不同
不识庐山真面目，只缘身在此山中
会当凌绝顶，一览众山小
perspective景深： 值越大距离越远 ( 给父元素添加 )
perspective:500px; 900 - 1200
景深得视角：
perspective-origin:
中间：center
左上角: left top
right top
10px 10px
css3 - 动画！
1：制作关键帧
@keyframes 动画名称{
/开始/
from{
left:0;
}
/结束/
to{
left:500px;
}
}
@keyframes 动画名称{
0%{
}
//中间可以添加任意关键帧
20%{
}
50%{
}
70%{
}
100%{
}
}

2: 调用关键帧：
    简写方式：
    animation:
        动画的名称  
        动画的时间  
        延迟时间 
        动画的类型
        动画循环的次数 （无限循环：infinite）
        动画运动的方向（reverse   alternate[先正后反]   alternate-reverse[先反后正])
        运动的状态：    animation-plat-state : running  paused(暂停)
        动画停止的状态:  animation-fill-mode:forwards (停在最后一帧);
        动画的类型：
            linear 匀速
            ease  默认值
            step-start:马上跳到动画每一结束桢的状态

transition 和 animation的区别：
transition需要事件触发（例如：鼠标滑过）
animation：自动触发
今天老师带领我们学习新课程，3d 位移：translateZ()\translate3d(x,y,z) 旋转：rotateZ()\rotate3d(x,y,z,deg) 缩放：scaleZ()\scale3d(x,y,z) 动画制定关键帧： @keyframes 名称{ } 调用关键帧： animation: 立方体的面正反。感觉老师讲的太快了，基础太差有些跟不上，这几天外出办事课程跟不上了，听不懂老师讲的了有点怀疑人生了。希望能从头再学一遍多给些练习的时间。老师的期望太高了，我现在只停留在能听懂的阶段，只能比着老师的案例写，问题也归纳不出来，只感觉脑子里一团浆糊。虽然也能听得懂， 但是思维逻辑跟不上，案例方面还有数学运算减行高减间距不太明白等等。到自己单独作的时候，却是有一种无从下手的感觉。也不知道能不能学会这一行，心理也是有一点担忧。只能硬着头皮学下去实在不行的话就留级，好想线下上课主要是家里有琐事打扰，想要全身心投入学习中！因为我想要改变以后的生活，不得不砥砺前行。