回顾:
触发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: 立方体的面正反。感觉老师讲的太快了,基础太差有些跟不上,这几天外出办事课程跟不上了,听不懂老师讲的了有点怀疑人生了。希望能从头再学一遍多给些练习的时间。老师的期望太高了,我现在只停留在能听懂的阶段,只能比着老师的案例写,问题也归纳不出来,只感觉脑子里一团浆糊。虽然也能听得懂, 但是思维逻辑跟不上,案例方面还有数学运算减行高减间距不太明白等等。到自己单独作的时候,却是有一种无从下手的感觉。也不知道能不能学会这一行,心理也是有一点担忧。只能硬着头皮学下去实在不行的话就留级,好想线下上课主要是家里有琐事打扰,想要全身心投入学习中!因为我想要改变以后的生活,不得不砥砺前行。