我们先来看下效果和代码
![85139839ee9444e554a32a62c2ed98c3.png](https://i-blog.csdnimg.cn/blog_migrate/e8e3e72c7c74f725fc67dc961cbe7d4d.jpeg)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin:0;padding: 0;}
li{list-style:none;}
html,body{height:100%;}
.box{
height:100%;
width:100%;
background: url(img/bj1.jpg) no-repeat;
background-size: cover;
perspective: 1200px;
}
.box ul{
width:200px;
height:300px;
position: absolute;
top:50%;left:50%;
margin:-150px 0 0 -100px;
transform-style: preserve-3d;
animation: play 20s linear infinite;
}
.box ul li{
width:200px;
height:300px;
position: absolute;
top:0;left:0;
}
.box ul li img{
width:200px;
height:300px;
}
.box ul li:nth-child(1){
transform: rotateY(36deg) translateZ(500px);
}
.box ul li:nth-child(2){
transform: rotateY(72deg) translateZ(500px);
}
.box ul li:nth-child(3){
transform: rotateY(108deg) translateZ(500px);
}
.box ul li:nth-child(4){
transform: rotateY(144deg) translateZ(500px);
}
.box ul li:nth-child(5){
transform: rotateY(180deg) translateZ(500px);
}
.box ul li:nth-child(6){
transform: rotateY(216deg) translateZ(500px);
}
.box ul li:nth-child(7){
transform: rotateY(252deg) translateZ(500px);
}
.box ul li:nth-child(8){
transform: rotateY(288deg) translateZ(500px);
}
.box ul li:nth-child(9){
transform: rotateY(324deg) translateZ(500px);
}
.box ul li:nth-child(10){
transform: rotateY(360deg) translateZ(500px);
}
@keyframes play{
0%{ transform: rotateX(0) rotateY(0deg) scale(1)}
50%{ transform: rotateX(5deg) rotateY(180deg) scale(0.7)}
100%{ transform: rotateX(0) rotateY(360deg) scale(1)}
</style>
</head>
<body>
<div class="box">
<ul>
<li><img src="img/767c14d61de6d5e4b990fc572a6568e1_1.jpg" ></li>
<li><img src="img/7a5807db25083336f4f743ae2f3f3a5d_1.jpg" ></li>
<li><img src="img/timg%5B1%5D.jpg" ></li>
<li><img src="img/u=1494278401,3707696933&fm=26&gp=0%5B1%5D.jpg" ></li>
<li><img src="img/u=1502903317,987147048&fm=26&gp=0%5B1%5D.jpg" ></li>
<li><img src="img/u=1723581145,678087488&fm=26&gp=0%5B1%5D.jpg" ></li>
<li><img src="img/u=2471723103,4261647594&fm=26&gp=0%5B1%5D.jpg" ></li>
<li><img src="img/u=2739698855,2466469814&fm=26&gp=0%5B1%5D.jpg" ></li>
<li><img src="img/u=361494981,3349639195&fm=26&gp=0%5B1%5D.jpg" ></li>
<li><img src="img/u=895819719,4227412122&fm=26&gp=0%5B1%5D.jpg" ></li>
</ul>
</div>
</body>
</html>
如果需要可把下方图片换成自己喜欢的,制作成自己的相册。