<head>
    <meta charset="UTF-8" />
    <title>How to make 3D Rotating Image in CSS ?</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="box">
      <span style="--i:1"> <img src="https://picsum.photos/id/1/5616/3744"> </span>
      <span style="--i:2"> <img src="https://picsum.photos/id/1/5616/3744"> </span>
      <span style="--i:3"> <img src="https://picsum.photos/id/1/5616/3744"> </span>
      <span style="--i:4"> <img src="https://picsum.photos/id/1/5616/3744"> </span>
      <span style="--i:5"> <img src="https://picsum.photos/id/1/5616/3744"> </span>
      <span style="--i:6"> <img src="https://picsum.photos/id/1/5616/3744"> </span>
      <span style="--i:7"> <img src="https://picsum.photos/id/1/5616/3744"> </span>
      <span style="--i:8"> <img src="https://picsum.photos/id/1/5616/3744"> </span>
      <span style="--i:9"> <img src="https://picsum.photos/id/1/5616/3744"> </span>
    </div>
  </body>
* {
    padding: 0;
    margin: 0;
    font-family: 'IBM Plex Sans', sans-serif;
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: #000;
}
.box {
    position: relative;
    width: 300px;
    height: 150px;
    transform-style: preserve-3d;
    animation: animate 30s linear;
}
@keyframes animate {
    0% {
        transform: perspective(1000px) rotateY(0deg);
    }
    100% {
        transform: perspective(1000px) rotateY(360deg);
    }
}
.box > 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(400px);
    -webkit-box-reflect: below 0px linear-gradient(transparent, transparent, #0000001a);
}
.box > span > img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: contain;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.