CodePen Embed - CSS 3D View & -webkit-box-reflect

Live

 
<div class="container">
  <!-- 舞台层 -->
  <div class="stage">
    <!-- 控制层 -->
    <div class="control">
      <!-- 图片层 -->
      <div class="imgWrap">
        <div class="img img1"><img src="https://picsum.photos/2000/1000?random=99"></div>
        <div class="img img2"><img src="https://picsum.photos/2000/1000?random=100"></div>
        <div class="img img3"><img src="https://picsum.photos/2000/1000?random=101"></div>
        <div class="img img4"><img src="https://picsum.photos/2000/1000?random=102"></div>
        <div class="img img5"><img src="https://picsum.photos/2000/1000?random=103"></div>
        <div class="img img6"><img src="https://picsum.photos/2000/1000?random=104"></div>
        <div class="img img7"><img src="https://picsum.photos/2000/1000?random=105"></div>
        <div class="img img8"><img src="https://picsum.photos/2000/1000?random=106"></div>
      </div>
    </div>
  </div>
</div>

Live

​x
 
$imgCount : 8;
html, body {
  background: #000;
}
​
.container{
  position:relative;
}
​
.stage{
  position:relative;
  width: 800px;
  height: 240px;
  margin: 20px auto;
  perspective:2000px;
  transform-style: preserve-3d;
  -webkit-box-reflect: below 10px linear-gradient(transparent, rgba(0, 0, 0, .5));
  
  .control{
    position:relative;
    width:100%;
    height:100%;
    transform-style: preserve-3d;
    transform: translateZ(-2000px) rotateY(50deg) rotateZ(0deg);
    animation:rotate 30s linear infinite;
    
    .imgWrap{
      position:absolute;
      width:400px;
      height:400px;
      top:50%;
      left:50%;
      transform:translate(-50%, -50%);
      transform-style: preserve-3d;
      
      .img{
        position:absolute;
        width:500px;
        height:400px;
        line-height:400px;
        text-align:center;
        font-size:120px;
        top:0;
        left:0;
        transform-style: preserve-3d;
        transform-origin: 50% 50% 0px;
      }
      
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
​
      @for $i from 1 through $imgCount{
        .img#{$i}{
          // transform: rotateY(35 + ($i * 45deg)) translateZ(482.84px) ;
          transform: rotateY(35 + ($i * 45deg)) translateZ(650px) ;
        }
      }
    }
  }
}
​
@keyframes rotate{
  0%{
    transform: translateZ(-2000px) rotateY(0deg);
  }
  50%{
    transform: translateZ(-2000px) rotateY(-360deg);
  }
  100%{
    transform: translateZ(-2000px) rotateY(-720deg);
  }
}

This Pen is owned by mafqla on CodePen. It is a fork of this Pen.

See more by @mafqla on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.