主要代码实现：

CSS样式：

body {
    /*background: url(../img/preview.png) ;*/
    max-width: 100%;
    min-width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
}

li {
    list-style: none;
}

.box {
    width: 200px;
    height: 200px;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% 100%;
    position: absolute;
    margin-left: 42%;
    margin-top: 22%;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotateX(13deg);
    -webkit-animation: move 5s linear infinite;
}

.minbox {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50px;
    top: 30px;
    -webkit-transform-style: preserve-3d;
}

.minbox li {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 0;
    top: 0;
}

.minbox li:nth-child(1) {
    background: url(../img/01.png) no-repeat 0 0;
    -webkit-transform: translateZ(50px);
}

.minbox li:nth-child(2) {
    background: url(../img/02.png) no-repeat 0 0;
    -webkit-transform: rotateX(180deg) translateZ(50px);
}

.minbox li:nth-child(3) {
    background: url(../img/03.png) no-repeat 0 0;
    -webkit-transform: rotateX(-90deg) translateZ(50px);
}

.minbox li:nth-child(4) {
    background: url(../img/04.png) no-repeat 0 0;
    -webkit-transform: rotateX(90deg) translateZ(50px);
}

.minbox li:nth-child(5) {
    background: url(../img/05.png) no-repeat 0 0;
    -webkit-transform: rotateY(-90deg) translateZ(50px);
}

.minbox li:nth-child(6) {
    background: url(../img/06.png) no-repeat 0 0;
    -webkit-transform: rotateY(90deg) translateZ(50px);
}

.maxbox li:nth-child(1) {
    background: url(../img/1.png) no-repeat 0 0;
    -webkit-transform: translateZ(50px);
}

.maxbox li:nth-child(2) {
    background: url(../img/2.png) no-repeat 0 0;
    -webkit-transform: translateZ(50px);
}

.maxbox li:nth-child(3) {
    background: url(../img/3.png) no-repeat 0 0;
    -webkit-transform: rotateX(-90deg) translateZ(50px);
}

.maxbox li:nth-child(4) {
    background: url(../img/4.png) no-repeat 0 0;


### 最后前端到底应该怎么学才好？

如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。



不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。学习编程并不是每天光看视频，你学习编程最重要的目的是为了编写软件产品，提供给大众使用，所以用手写出代码实现功能才是我们要做的事情。

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

![在这里插入图片描述](https://img-blog.csdnimg.cn/87c2dbe3aa9546dab0e3e5c674753150.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h6aXQ0OTQ4MDE4MzE=,size_16,color_FFFFFF,t_70#pic_center)  

![在这里插入图片描述](https://img-blog.csdnimg.cn/a3cbdf94b9be48529119539cde243f97.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h6aXQ0OTQ4MDE4MzE=,size_16,color_FFFFFF,t_70#pic_center)



![在这里插入图片描述](https://img-blog.csdnimg.cn/0f2364db34af4d57b77547b5f312230a.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h6aXQ0OTQ4MDE4MzE=,size_16,color_FFFFFF,t_70#pic_center)

![在这里插入图片描述](https://img-blog.csdnimg.cn/187f1f54cfd94cf7b88a363ffa363f10.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h6aXQ0OTQ4MDE4MzE=,size_16,color_FFFFFF,t_70#pic_center)