<!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>
