<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: peachpuff;
}
.bigbox{
width: 800px;
height: 400px;
margin: 80px auto 0px;
perspective: 1000px;
}
.box{
width: 800px;
height: 400px;
position: relative;
transition: all ease 1s;
transform-style: preserve-3d;
animation: rotate_img 15s ease infinite;
}
.card{
width: 200px;
height: 300px;
background-size: cover;
box-shadow: 0 0 8px #ffaaff;
-webkit-box-reflect: below 15px;
lineear-gradient(transparent,transparent,#ffaaff);
position: absolute;
bottom: 0px;
left: 50%;
margin-left: -130px;
}
.box1{
background-image: url(img/1.jpg);
transform: translateZ(300px);
}
.box2{
background-image: url(img/2.jpg);
transform: rotateY(51.4deg) translateZ(300px);
}
.box3{
background-image: url(img/3.webp);
transform: rotateY(102.8deg) translateZ(300px);
}
.box4{
background-image: url(img/4.jpg);
transform: rotateY(154.2deg) translateZ(300px);
}
.box5{
background-image: url(img/5.jfif);
transform: rotateY(205.7deg) translateZ(300px);
}
.box6{
background-image: url(img/6.webp);
transform: rotateY(257.1deg) translateZ(300px);
}
.box7{
background-image: url(img/7.jpg);
transform: rotateY(308.5deg) translateZ(300px);
}
@keyframes rotate_img{
0%{
transform: rotateX(-10deg) rotateY(0deg);
}
100%{
transform: rotateX(-10deg) rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="bigbox">
<div class="box">
<div class="card box1"></div>
<div class="card box2"></div>
<div class="card box3"></div>
<div class="card box4"></div>
<div class="card box5"></div>
<div class="card box6"></div>
<div class="card box7"></div>
</div>
</div>
</body>
</html>