HTML部分：

<body>
    <div class="photo-wrap">  <!-- 舞台 -->
      <div class="container">   <!-- 容器 -->
          <div class="img">我是中心</div>
          <div class="img img01"><img src="images/blog1.jpg" alt=""></div>
          <div class="img img02"><img src="images/blog2.jpg" alt=""></div>
          <div class="img img03"><img src="images/blog3.jpg" alt=""></div>
          <div class="img img04"><img src="images/blog4.jpg" alt=""></div>
          <div class="img img05"><img src="images/blog1.jpg" alt=""></div>
          <div class="img img06"><img src="images/blog2.jpg" alt=""></div>
          <div class="img img07"><img src="images/blog3.jpg" alt=""></div>
          <div class="img img08"><img src="images/blog4.jpg" alt=""></div>
          <div class="img img09"><img src="images/blog1.jpg" alt=""></div>
      </div>
  </div>
</body>

CSS部分：

 @keyframes rotate-frame {
        0% {
            transform: rotateX(-20deg) rotateY(0deg);
        }
        10% {
            transform: rotateX(-20deg) rotateY(36deg);
        }
        20% {
            transform: rotateX(-20deg) rotateY(72deg);
        }
        30% {
            transform: rotateX(-20deg) rotateY(108deg);
        }
        40% {
            transform: rotateX(-20deg) rotateY(144deg);
        }
        50% {
            transform: rotateX(-20deg) rotateY(180deg);
        }
        60% {
            transform: rotateX(-20deg) rotateY(216deg);
        }
        70% {
            transform: rotateX(-20deg) rotateY(252deg);
        }
        80% {
            transform: rotateX(-20deg) rotateY(288deg);
        }
        90% {
            transform: rotateX(-20deg) rotateY(324deg);
        }
        100% {
            transform: rotateX(-20deg) rotateY(360deg);
        }

      }
      body {
          background: #f9f9f9;
      }
      img{
          width:100%;
          height: 100%;
      }
      .photo-wrap {
          perspective: 800px;
          width: 800px;
      }
      .container {
          width: 800px;
          height: 500px;
          margin: 0 auto;
          position: relative;
          transform-style: preserve-3d;
          transform:rotateX(-10deg);
           animation: rotate-frame 10s linear infinite;
      }
      .img {
          width: 200px;
          height: 118px;
          line-height: 118px;
          text-align: center;
          position: absolute;
          top: 160px;
          left: 300px;
          box-shadow: 0 0 20px rgba(0, 0, 0, 0.9) inset;
　　　　　　/*倒影的实现 第二个属性值为offset属性值定义图片和倒影影像之间的间距，第三个为给倒影增加消影效果*/
          -webkit-box-reflect:below 3px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5));
          background: pink;
          background:-moz-linear-gradient(top, pink, rgba(0, 0, 255, 0.5));
          background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ccccff), to(rgba(174, 221, 129, 0.5)));
          background:-o-linear-gradient(top, pink, rgba(0, 0, 255, 0.5));
          transform: rotateY(0deg);
      }
      .img01 {
          transform: rotateY(0deg) translateZ(300px);
      }
      .img02 {
          transform: rotateY(40deg) translateZ(300px);
      }
      .img03 {
          transform: rotateY(80deg) translateZ(300px);
      }
      .img04 {
          transform: rotateY(120deg) translateZ(300px);
      }
      .img05 {
          transform: rotateY(160deg) translateZ(300px);
      }
      .img06 {
          transform: rotateY(200deg) translateZ(300px);
      }
      .img07 {
          transform: rotateY(240deg) translateZ(300px);
      }
      .img08 {
          transform: rotateY(280deg) translateZ(300px);
      }
      .img09 {
          transform: rotateY(320deg) translateZ(300px);
      }

效果如下（倒影的实现方法已在CSS部分用蓝色标记出来）：