<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
/* @keyframes rotate {
0% {
transform: translateZ(300px);
}
25% {
transform: translateX(300px) rotateY(90deg);
}
50% {
transform: translateZ(-300px) rotateY(180deg);
}
75% {
transform: translateX(-300px) rotateY(270deg);
}
100% {
transform: translateZ(300px) rotate(360deg);
}
} */
@keyframes rotate {
100% {
transform: rotateY(360deg);
}
}
div {
margin: 200px auto;
perspective: 1200px;
}
ul {
position: absolute;
left: 40%;
top: 40%;
width: 200px;
height: 150px;
background: url(/7.jpeg) no-repeat;
background-position: center;
background-size: contain;
transform-style: preserve-3d;
animation: rotate 10s linear infinite;
}
/* ul:hover {
transform: rotateY(360deg);
} */
li {
list-style: none;
filter: blur(2px);
box-shadow: 0px 0px 10px black;
}
li[class^='box'] {
position: absolute;
list-style: none;
background-size: contain;
width: 200px;
height: 150px;
}
.box1 {
background: url(/5.jpeg);
/* transform: translateZ(-300px); */
transform: rotateY(0deg) translateZ(300px);
/* animation: rotate 12s linear infinite; */
}
.box2 {
background: url(/2.jpeg);
transform: rotateY(60deg) translateZ(300px);
/* transform: translateX(300px) rotateY(60deg); */
/* animation: rotate 12s linear 2s infinite; */
}
.box3 {
background: url(/4.jpeg);
transform: rotateY(120deg) translateZ(300px);
/* transform: translateX(-300px) rotateY(120deg); */
/* animation: rotate 12s linear 4s infinite; */
}
.box4 {
background: url(/6.jpeg);
transform: rotateY(180deg) translateZ(300px);
/* transform: translateZ(300px) rotateY(180deg); */
/* animation: rotate 12s linear 6s infinite; */
}
.box5 {
background: url(/1.jpeg);
transform: rotateY(240deg) translateZ(300px);
/* transform: translate3d(-300px, 0, -300px) rotateY(240deg); */
/* animation: rotate 12s linear 8s infinite; */
}
.box6 {
background: url(/3.jpeg);
transform: rotateY(300deg) translateZ(300px);
/* transform: translate3d(300px, 0, -300px) rotateY(300deg); */
/* animation: rotate 12s linear 10s infinite; */
}
</style>
</head>
<body>
<div>
<ul>
<li class="box1"></li>
<li class="box2"></li>
<li class="box3"></li>
<li class="box4"></li>
<li class="box5"></li>
<li class="box6"></li>
</ul>
</div>
</body>
</html>