* { margin:0; padding:0; box-sizing:border-box; }

body {
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:100vh;
  background:#000;
  perspective: 1000px;            /* <-- put perspective on parent */
}

.box {
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  animation: spin 40s linear infinite;
}

@keyframes spin {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

.box span {
  position:absolute;
  inset:0;                         /* top:0; right:0; bottom:0; left:0 */
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--i) * 40deg)) translateZ(400px);
  -webkit-box-reflect: below 0px linear-gradient(transparent, transparent, #0004);
}

.box span img {
  width:100%;
  height:100%;
  object-fit:cover;
  border: 2px solid white;         
  border-radius:18px;
}