<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body,html{
width: 100%;
height: 100%;
background: url(https://img2.baidu.com/it/u=2637839740,455720686&fm=253&fmt=auto&app=138&f=JPEG?w=708&h=500) ;
background-size: 100%;
}
.box{
width: 280px;
height: 400px;
position: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
/* 制作一个3D空间 */
transform-style: preserve-3d;
/* 定义动画 */
animation: img_root 20s linear infinite;
}
@keyframes img_root{
0%{
transform:rotateX(0deg) rotateY(0deg);
}
25%{
transform:rotateX(10deg) rotateY(90deg);
}
50%{
transform:rotateX(0deg) rotateY(180deg);
}
75%{
transform:rotateX(-10deg) rotateY(180deg);
}
100%{
transform:rotateX(0deg) rotateY(360deg);
}
}
.box .imgbox{
width: 280px;
height: 400px;
position: absolute;
/* 让每个盒子进行正600方向位移 */
transform-origin:center center -600px;
}
.box .imgbox img{
display: block;
width: 100%;
height: 100%;
}
.imgbox1{
transform: translateZ(600px);
}
.imgbox2{
transform: translateZ(600px) rotateY(36deg) ;
}
.imgbox3{
transform: translateZ(600px) rotateY(72deg);
}
.imgbox4{
transform: translateZ(600px) rotateY(108deg);
}
.imgbox5{
transform: translateZ(600px) rotateY(144deg);
}
.imgbox6{
transform: translateZ(600px) rotateY(180deg);
}
.imgbox7{
transform: translateZ(600px) rotateY(216deg);
}
.imgbox8{
transform: translateZ(600px) rotateY(252deg);
}
.imgbox9{
transform: translateZ(600px) rotateY(288deg);
}
.imgbox10{
transform: translateZ(600px) rotateY(324deg);
}
</style>
</head>
<body>
<div class="box">
<div class="imgbox imgbox1">
<img src="https://img0.baidu.com/it/u=3348108161,4090300289&fm=253&fmt=auto&app=138&f=JPEG?w=772&h=500" >
</div>
<div class="imgbox imgbox2">
<img src="https://img1.baidu.com/it/u=1961201402,3286512970&fm=253&fmt=auto&app=138&f=JPEG?w=490&h=695" >
</div>
<div class="imgbox imgbox3">
<img src="https://img0.baidu.com/it/u=1240056232,610289474&fm=26&fmt=auto" >
</div>
<div class="imgbox imgbox4">
<img src="https://img2.baidu.com/it/u=1127012818,54406412&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500" >
</div>
<div class="imgbox imgbox5">
<img src="https://img1.baidu.com/it/u=2793564285,2846423129&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333" >
</div>
<div class="imgbox imgbox6">
<img src="https://img0.baidu.com/it/u=1819073924,1246023593&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=666" >
</div>
<div class="imgbox imgbox7">
<img src="https://img2.baidu.com/it/u=3675353349,3978127228&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500" >
</div>
<div class="imgbox imgbox8">
<img src="https://img0.baidu.com/it/u=3889190774,3757976959&fm=253&fmt=auto&app=138&f=JPEG?w=375&h=499" >
</div>
<div class="imgbox imgbox9">
<img src="https://img1.baidu.com/it/u=4130249902,896061216&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500" >
</div>
<div class="imgbox imgbox10">
<img src="https://img1.baidu.com/it/u=3128663082,841671865&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500" >
</div>
</div>
</body>
</html>
效果图