.titlefy {
  font-family: "Pixelify Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

.titlefy h1 {
  font-size: 8rem;
}

:root {
  --perspective: 1000px;
  --item_nums: 8; /* no of items */
  --radius: 200px
}

.scene{
  width: 100%;
  height: 100vh;
  text-align: center;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: var(--perspective);
}

.scene .rotation{
  position: absolute;
  width: 50px;
  height: 100px;
  top: 30%;
  transform-style: preserve-3d;
  animation: autoRun 15s linear infinite;
}

@keyframes autoRun {
  from{
    transform:rotateX(-50deg) rotateY(0deg);
  } to {
  transform:rotateX(-50deg) rotateY(360deg);
      }
}

.scene .rotation .item{
  position: absolute;
  inset: 0;
  transform: rotateY(calc((var(--i) - 1) * (360 / var(--item_nums)) * 1deg)) translateZ(var(--radius));
}

.scene .rotation .item img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}