2024年最新HTML+CSS实战操作旋转魔方(3)，最新2024年Web前端大厂面试经验

前端框架

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

以 Vue 为例，我整理了如下的面试题。

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

1.2  通过分析，魔方有6个面，但是实现hover的时候有一个分解的效果，总共有12个面

嗯，有点意思，直接在container容器里放置12div元素，div*12 Tab即可

<div class="container">

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

    <div></div>

</div>

1.3  HTML代码解决了，在编写CSS之前先引入CSS样式表，即index.html中引入index.css，引入的index.css一般放置在title标签下面，href文件路径根据自己设置而定。

<title>旋转魔方</title>

<link rel="stylesheet" href="../css/index.css">

2、CSS代码片段

---

2.1  css编写第一步一般都会写通配符来去除内外边距，来消除某些浏览器固定的网页模板对代码的影响。

*{

    margin: 0;

    padding: 0;

}

弹性盒布局设置：

魔方显然放在网页中心才显得好看，如何实现？传统布局——基于盒子模型，依赖 display 属性、position属性、float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

并且，传统布局代码冗长，出错率高，要时刻注意清除浮动或者在进行绝对定位时给父元素添加相对定位。否则就容易造成页面布局混乱。但是，Flex布局就可以避免这种情况：Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

详解：https://blog.csdn.net/a1015895218/article/details/115355465

2.2  对body进行设置弹性盒以及自己喜欢的背景颜色

body{

    //vw,vh为视口单位，1vw等于视口宽度的1%。

    width: 100vw;  

    height: 100vh;

    display: flex; //弹性盒设置

    justify-content:center; //主轴居中对齐

    align-items:center;     //交叉轴居中对齐

    /* 添加一个视距 */

    perspective: 1000px; //让旋转效果变得更真实

    background: #000;

}

2.3  对container容器元素进行相关设置，实现3D风格

.container{

    width: 150px;

    height: 150px;

    /* border: 1px solid; */

    transform-style: preserve-3d;

    position: relative;

    transition:5s;

    /* 之所以设置相对定位，是因为子绝父相 */

    animation: rotate 5s infinite linear;

}

2.4  container悬停的视觉效果设置

.container:hover{

    /* 当鼠标移入时，改变视角 */

    transform: rotateY(180deg) rotateX(180deg);

}

2.5  container下子元素div进行相关位置背景设置，子元素div相当于父元素container是绝对定位。

.container div{

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

    background-color: #fff;

    transition: 1s;

    background-color: #fff;

}

2.6  现在书写魔方各个面的背景图以及旋转角度等设置

.container div:nth-child(1),

.container div:nth-child(7){

    background: url('../images/img1.jpg') no-repeat center/cover white;

    transform: translateZ(75px);

}



.container:hover div:nth-child(1){

    transform: translateZ(200px);

}



.container div:nth-child(2),

.container div:nth-child(8){

    background: url('../images/img2.jpg') no-repeat center/cover white;

    transform: rotateX(-180deg) translateZ(75px);

}



.container:hover div:nth-child(2){

    transform: rotateX(-180deg) translateZ(200px);

}



.container div:nth-child(3),

.container div:nth-child(9){

    background: url('../images/img3.jpg') no-repeat center/cover white;

    transform: rotateX(90deg) translateZ(75px);

}


###  最后

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了

![](https://img-blog.csdnimg.cn/img_convert/4275cd99ab406d6393e8f383efddf601.webp?x-oss-process=image/format,png)

![](https://img-blog.csdnimg.cn/img_convert/a0fef97ef0047a62ccb5fdd34eac59f2.webp?x-oss-process=image/format,png)


**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了

[外链图片转存中...(img-BQ3pFIeB-1715697901761)]

[外链图片转存中...(img-ZvqcXx2U-1715697901762)]


**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**