<div class="scope">
  <span style="--i:1;"><img src="https://images.unsplash.com/photo-1656872626647-425d8f6bdc20?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTg4MjM3MTk&ixlib=rb-1.2.1&q=80" alt="not found"></span>
  <span style="--i:2;"><img src="https://i.postimg.cc/rw01LVcN/pexels-yentl-jacobs-157811.jpg" alt="not found"></span>
  <span style="--i:3;"><img src="https://images.unsplash.com/photo-1643474933660-a9decfadbcd1?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTg4MjQyNzQ&ixlib=rb-1.2.1&q=80" alt="not found"></span>
  <span style="--i:4;"><img src="https://images.unsplash.com/photo-1644185718274-8b3032dca14d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTg4MjQ5MDU&ixlib=rb-1.2.1&q=80"></span>
  <span style="--i:5;"><img src="https://images.unsplash.com/photo-1643474933611-635b78bbec1a?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTg4MjQzNTc&ixlib=rb-1.2.1&q=80" alt="not found"></span>
  <span style="--i:6;"><img src="https://images.unsplash.com/photo-1568272086078-0744ee2242b7?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTg4MjQ1MjM&ixlib=rb-1.2.1&q=80" alt="not found"></span>
  <span style="--i:7;"><img src="https://images.unsplash.com/photo-1574477942555-afd91f0eeda4?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTg4MjUwNjI&ixlib=rb-1.2.1&q=80" alt="not found"></span>
  <span style="--i:8;"><img src="https://i.postimg.cc/52Sxyvx4/pexels-bogdan-lapadatu-1913839.jpg" alt="not found"></span>
</div>

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #eeeeee;
  background: -webkit-linear-gradient(to right, #2c5364, #203a43, #0f2027);
  overflow: hidden;
}
.scope {
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  animation: slid 30s linear infinite;
}

.scope span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: center;
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--i) * 45deg)) translateZ(350px);
}
.scope span img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
  transition: 2s;
}
.scope span:hover img {
  transform: translateY(-50px) scale(1.7);
}
@keyframes slid {
  0% {
    transform: perspective(1000px) rotateY(0deg);
  }
  100% {
    transform: perspective(1000px) rotateY(360deg);
  }
}