前端H5+C3实现旋转相册

效果图如下：

代码如下：

<style>
      *{
         margin: 0;
         padding: 0;
      }
      html,body{
         width: 100%;
         height: 100%;
      }
      body{
         background:#1e1e1f;
         overflow:hidden;
      }
      .box{
         width: 100%;
         height: 100%;
         position: relative;
         transform-style: preserve-3d;
         transform:rotateX(-20deg) rotateY(0deg);
      }
      .box img{
         width: 300px;
         height: 200px;
         position: absolute;
         left: calc(50% - 150px);
         top: calc(50% - 100px);
         border: 5px solid #ffffff;
         user-select: none;
         -webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 50%,rgba(0,0,0,0.5) 100%);
      }
      #wrap p{
         width: 1200px;
         height: 1200px;