1、准备照片

需要1张大的背景图和6张3d相册用图存放在img文件夹中。

可以先使用PS、美图秀秀或者其他修图软件等将相册用图改成200px*200px。

注意文件存储位置👇

2、新建一个html文件

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>星旭同学</title><link type="text/css" href="css/blingbling.css" rel="stylesheet"/><!-- 这里注意CSS文件名，路径需要与第三步中创建的文件一致 --></head><body><div class="box"><ul class="minbox"><li></li><li></li><li></li><li></li><li></li><li></li></ul></div></body>
</html>

3、新建一个CSS文件

*{margin: 0;padding: 0;
}
body{background-image:url(../img/00.jpg) ;/*背景图片设置*/background-size: cover;
}
.box{position: relative;width: 200px;height:200px;margin-top:200px; /*3D相册位置*/margin-left: 850px; /*3D相册位置*/transform-style:preserve-3d ;animation: movie 10s infinite linear; /*绑定动画，注意名字与设置动画相同*/
}
.minbox{width: 200px;height: 200px;position: absolute;transform-style:preserve-3d ;
}
ul{list-style: none;
}
.minbox li{width: 200px;height: 200px;position: absolute;
}
.minbox li:nth-child(1){background: url(../img/01.jpg);transform: translateZ(100px);
}
.minbox li:nth-child(2){background: url(../img/02.jpg);transform: rotateX(180deg) translateZ(100px);
}
.minbox li:nth-child(3){background: url(../img/03.jpg);transform: rotateX(-90deg) translateZ(100px);
}
.minbox li:nth-child(4){background: url(../img/04.jpg);transform: rotateX(90deg) translateZ(100px);
}
.minbox li:nth-child(5){background: url(../img/05.jpg);transform: rotateY(-90deg) translateZ(100px);
}
.minbox li:nth-child(6){background: url(../img/06.jpg);transform: rotateY(90deg) translateZ(100px);
}
@keyframes movie{ /*设置动画*/0%{transform: rotateX(30deg) rotateZ(0deg) rotateY(0deg);}100%{transform: rotateX(30deg) rotateZ(360deg) rotateY(360deg);}
}