H5C3-2D、3D转换-动画(1)，前端framework面试题

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Web前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip1024c （备注前端）

正文

定义：相比于过渡，动画可以实现更多的变化，可以连续自动播放

0%或者from是动画的开始，100%或者to是动画的完成-----动画的序列。

可以改变任意多的样式和任意多的次数,多个动画用逗号隔开 里面的百分比要是整数

书写规范–先定义后使用

1、先定义：

@keyframes 动画名称 {

0% {

中规定某项css样式，就能创建有当前样式逐渐成为新样式的动画效果;

}

100% {

中规定某项css样式，就能创建有当前样式逐渐成为新样式的动画效果;

}

}

2、后使用(谁需要动画就给谁添加)：

标签{

animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态 ;

}

| 属性 | 说明 |

| — | — |

| @keyframes | 定义动画 |

| | |

| animation-name | 动画名称 |

| | |

| animation-duration | 花费的时间。单位是秒和毫秒 |

| | |

| animation-timing-function | 动画的速度曲线，默认值：ease，匀速：linear，指定时间函数中的间隔数量（步长）：steps() |

| | |

| animation-delay | 何时开始默认值是0 |

| | |

| animation-iteration-count | 动画播放的次数默认是1，无线循环是infinite |

| | |

| animation-direction | 是否反方向播放默认值是normal 还有跑马灯：alternate。 |

| | |

| animation-fill-mode | 播放后停留的位置，默认是backwards回到起始位置。停在结束位置forwards |

| | |

| animation-play-state | 是否运行还是停止，默认是running，还有paused，暂停动画。和hover搭配用，鼠标放上去就停止 |

综合简写 animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态 ;

注意：先写持续时间,后写何时开始。动画名称和持续时间是必须写的。简写不包括animation-play-state，一般和hover一起。

三、3D转换-transform

===============================================================================

| 属性 | 说明 |

| — | — |

| perspective | 透视，透视值越小成像就越大,观察的物体就越立体。透视的单位是像素，透视写到被观察物体的父盒子里面 |

| transform:translate3d (x,y,z) | 位移，xyz值不可以省略，如果没有就写0 单位px，z轴越大物体就越大，负值就越小，前提是在透视下 |

| transform:rotate3d(x,y,z) | 旋转 单位deg |

| transfrom-style | 3d呈现，flat子元素不开启3d立体空间 默认的。preserve-3d；子元素开启立体空间代码是写给父级，但是影响的是子盒子 |

xyz表示旋转的矢量 transform:ratate3d(x,y,z,度数deg);----沿着自定义轴旋转deg为角度 比如沿着x轴旋转45度：transform:ratate3d(1,0,0,45deg);

1、 transform:rotateX(45deg);------沿着x轴正方向旋转45度 正值方向：左手准则

2、 transform:rotateY(45deg);------沿着y轴正方向旋转45度 正值方向：左手准则

最后

给大家分享一些关于HTML的面试题。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化的资料的朋友，可以添加V获取：vip1024c （备注前端）

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
）**
[外链图片转存中…(img-ZPL7VufY-1713301010919)]

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！