SOURCE

<div class="camera">
  <div class="space">
    <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3346899083,378209289&fm=23&gp=0.jpg" width="100%" height="100%" class="item item1">
    <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4007000612,3029502591&fm=23&gp=0.jpg" width="100%" height="100%" class="item item2">
    <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=438155865,1502224858&fm=23&gp=0.jpg" width="100%" height="100%" class="item item3">
    <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=438155865,1502224858&fm=23&gp=0.jpg" width="100%" height="100%" class="item item4">
    <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2414460273,1885753838&fm=23&gp=0.jpg" width="100%" height="100%" class="item item5">
    <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4294606076,2616318684&fm=23&gp=0.jpg" width="100%" height="100%" class="item item6">
<!--     <ul class="box-3d">
      <li class="item item1">
        <img width="100%" height="100%" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3346899083,378209289&fm=23&gp=0.jpg">
      </li>
      <li class="item item2">
        <img width="100%" height="100%" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4007000612,3029502591&fm=23&gp=0.jpg">
      </li>
      <li class="item item3">
        <img width="100%" height="100%" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1556026799,127855153&fm=23&gp=0.jpg">
      </li>
      <li class="item item4">
        <img width="100%" height="100%" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=438155865,1502224858&fm=23&gp=0.jpg">
      </li>
      <li class="item item5">
        <img width="100%" height="100%" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2414460273,1885753838&fm=23&gp=0.jpg">
      </li>
      <li class="item item6">
        <img width="100%" height="100%" src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4294606076,2616318684&fm=23&gp=0.jpg">
      </li>
    </ul> -->
  </div>
</div>

.camera {
  width: 200px;
  height: 100px;
  perspective-origin: center center;
  perspective: 1000px;
  margin: 50px 210px;
}

.space {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
/*   animation: rotate-all 20s linear infinite; */
}
  .item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: red;
    transform: translateZ(200px);
  }
  
  .item2 {
    transform: rotateY(120deg) translateZ(200px);
  }
  .item3 {
    transform: rotateY(60deg) translateZ(200px);
  }
  .item4 {
    transform: rotateY(180deg) translateZ(200px);
  }
  .item5 {
    transform: rotateY(240deg) translateZ(200px);
  }
  .item6 {
    transform: rotateY(300deg) translateZ(200px);
  }

@keyframes rotate-all {
  100% {
    transform: rotateY(360deg);
  }
}