3d功能函数: 3d位移
3d缩放
3d旋转
形成3d空间(让父元素形成3d空间、3d舞台):
transform-style:preserve-3D
1.3d位移:
transform:translate3d(x,y,z);
transform:translateZ();
2.3D旋转:rotateZ();
rotate3d(x,y,z,度数) x y z 是矢量值,0不旋转 1旋转
3.3D缩放:scaleZ(); scale3d(x,y,z)
让背面不可见:backface-visibility:hidden;
4.景深:近大远小 perspective景深:值越大距离越远(给父元素添加)
5.景深的视角:prespective-origin:;中间center 左上角:left top right top
6.动画:
(1).制作关键帧:@keyframes 动画名称{
from{left:0;}
to{left:500px;}
或@keyframes 动画名称{
0%{}
20%{}
50%{}
100%{}
(2).调用关键帧:简写方式:animation:动画名称 动画时间 延迟时间 动画的类型 动画循环的次数(无限循环:infinite)动画运动的方向(reverse alternate 先正后反 alternate-reverse先反后正) 运动的状态:animation-plat-state:running pushed(暂停) 动画停止的状态:animation-fill-mode:forwards(停在最后一帧);
动画的类型:linear匀速 ease 默认值 step-start:马上跳到动画每一结束帧的状态
3d,动画
最新推荐文章于 2021-01-24 09:10:32 发布