Web前端最全前端入门篇（五十六）练习8：3d动画（照片旋转展示），CSS外边距塌陷问题

总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

width: 200px;

height: 200px;

line-height: 200px;

opacity: 0.5;

text-align: center;

color: #fff;

font-size: 30px;

}

.item:nth-child(1) {

background: royalblue;

transform: rotateY(60deg);

}

.item:nth-child(2){

background: salmon;

transform: rotateY(120deg);

}

.item:nth-child(3) {

background: slateblue;

transform: rotateY(180deg);

}

.item:nth-child(4) {

background: springgreen;

transform: rotateY(240deg);

}

.item:nth-child(5) {

background: pink;

transform: rotateY(300deg);

}

.item:nth-child(6) {

background: purple;

transform: rotateY(360deg);

}

效果：

然后每个图片朝各自前面移动200px

即每个nth-child下的transform加一个translateZ(200px);

如：

.item:nth-child(1) {

background: royalblue;

transform: rotateY(60deg) translateZ(200px);

}

看效果：

最后设置旋转动画，并调整父容器的translateX（父容器抬头的角度）

父级容器wrapper修改translateX，并调用动画：

transform: rotateX(30deg);

animation: move 10s linear infinite;

动画帧：

@keyframes move {

0% {

transform: rotateX(-20deg) rotateY(360deg);

}

100% {

transform: rotateX(-20deg) rotateY(0);

}

}

效果：下面那一排是在前面，1-2-3-4-5-6这样的顺序转：

最后

由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

小节点里面都有更细化的内容！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-Ox1bit1T-1715184813521)]

[外链图片转存中…(img-tJO6JfGn-1715184813521)]