抖音上很火的3D立体动态相册实现教程!(不懂编程也能学会)

国际惯例,先放实现效果:http://qijs.gitee.io/html-01

下载链接:https://gitee.com/Qijs/HTML-01

现在开始说说制作过程:

一、创建文件夹

1.在桌面建一个文件夹，命名随意

2.在文件夹里创建一个文件名为index.html的文件

3.在文件夹里创建两个文件名分别为img、css的文件夹

4.在css文件夹里创建一个名为style.css的文件

二、导入文件

1.将index.html的文件以记事本的格式打开,并复制粘贴以下代码:

酷炫3d

保存并退出

2.将style.css的文件以记事本的格式打开,并复制粘贴以下代码:

@charset "utf-8";

*{

    margin:0;

    padding:0;

}

body{

    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(1) img{

    width: 100%;

    height: 100%;

}

.minbox li:nth-child(2) img{

    width: 100%;

    height: 100%;

}

.minbox li:nth-child(3) img{

    width: 100%;

    height: 100%;

}

.minbox li:nth-child(4) img{

    width: 100%;

    height: 100%;

}

.minbox li:nth-child(5) img{

    width: 100%;

    height: 100%;

}

.minbox li:nth-child(6) img{

    width: 100%;

    height: 100%;

}

.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;*/

    -webkit-transform:rotateX(90deg) translateZ(50px);

}

.maxbox li:nth-child(5){

    /*background: url(../img/5.png) no-repeat 0 0;*/

    -webkit-transform:rotateY(-90deg) translateZ(50px);

}

.maxbox li:nth-child(6){

    /*background: url(../img/6.png) no-repeat 0 0;*/

    -webkit-transform:rotateY(90deg) translateZ(50px);

}

.maxbox{

    width: 800px;

    height: 400px;

    position: absolute;

    left: 0;

    top: -20px;

    -webkit-transform-style: preserve-3d;

}

.maxbox li{

    width: 200px;

    height: 200px;

    background: #fff;

    border:1px solid #ccc;

    position: absolute;

    left: 0;

    top: 0;

    opacity: 0.2;

    -webkit-transition:all 1s ease;

}

.maxbox li:nth-child(1){

    -webkit-transform:translateZ(100px);

}

.maxbox li:nth-child(1) img{

   width: 100%;

    height: 100%;

}

.maxbox li:nth-child(2) img{

    width: 100%;

    height: 100%;

}

.maxbox li:nth-child(3) img{

    width: 100%;

    height: 100%;

}

.maxbox li:nth-child(4) img{

    width: 100%;

    height: 100%;

}

.maxbox li:nth-child(5) img{

    width: 100%;

    height: 100%;

}

.maxbox li:nth-child(6) img{

    width: 100%;

    height: 100%;

}

.maxbox li:nth-child(2){

    -webkit-transform:rotateX(180deg) translateZ(100px);

}

.maxbox li:nth-child(3){

    -webkit-transform:rotateX(-90deg) translateZ(100px);

}

.maxbox li:nth-child(4){

    -webkit-transform:rotateX(90deg) translateZ(100px);

}

.maxbox li:nth-child(5){

    -webkit-transform:rotateY(-90deg) translateZ(100px);

}

.maxbox li:nth-child(6){

    -webkit-transform:rotateY(90deg) translateZ(100px);

}

.box:hover ol li:nth-child(1){

    -webkit-transform:translateZ(300px);

    width: 400px;

    height: 400px;

    opacity: 0.8;

    left: -100px;

    top: -100px;

}

.box:hover ol li:nth-child(2){

    -webkit-transform:rotateX(180deg) translateZ(300px);

    width: 400px;

    height: 400px;

    opacity: 0.8;

    left: -100px;

    top: -100px;

}

.box:hover ol li:nth-child(3){

    -webkit-transform:rotateX(-90deg) translateZ(300px);

    width: 400px;

    height: 400px;

    opacity: 0.8;

    left: -100px;

    top: -100px;

}

.box:hover ol li:nth-child(4){

    -webkit-transform:rotateX(90deg) translateZ(300px);

    width: 400px;

    height: 400px;

    opacity: 0.8;

    left: -100px;

    top: -100px;

}

.box:hover ol li:nth-child(5){

    -webkit-transform:rotateY(-90deg) translateZ(300px);

    width: 400px;

    height: 400px;

    opacity: 0.8;

    left: -100px;

    top: -100px;

}

.box:hover ol li:nth-child(6){

    -webkit-transform:rotateY(90deg) translateZ(300px);

    width: 400px;

    height: 400px;

    opacity: 0.8;

    left: -100px;

    top: -100px;

}

@keyframes move{

    0%{

        -webkit-transform: rotateX(13deg) rotateY(0deg);

    }

    100%{

        -webkit-transform:rotateX(13deg) rotateY(360deg);

    }

}

保存并退出

三、处理图片

1.在网上找12张图片,最好是正方形的

2.用美图秀秀的批处理功能,把格式改成png格式,同时把首序号改成01,得到12张编号01-12png格式的照片

3.编号7-12的改成编号为1-6,再把2,02图片倒过来(其中01-06是内层,1-6是外层)

4.把所有照片放到img文件夹下

四、双击index.html