$imgCount : 4;

​

.container{

  position:relative;

}

​

.stage{

  position:relative;

  width:800px;

  height:400px;

  margin:0 auto;

  perspective:2000px;

  transform-style: preserve-3d;

  .control{

    position:relative;

    width:100%;

    height:100%;

    transform-style: preserve-3d;

    transform: translateZ(0px) rotateY(50deg) rotateZ(0deg);

    animation:rotate 40s 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:400px;

        height:400px;

        line-height:400px;

        text-align:center;

        font-size:120px;

        top:0;

        left:0;

        transform-style: preserve-3d;

        transform-origin: 50% 50% 0px;

      }

      @for $i from 1 through $imgCount{

        .img#{$i}{

          background:hsla($i * 30, 50%, $i * 20%, $i * 0.2);

          // transform: rotateY(35 + ($i * 90deg)) translateZ(200px);

          rotate: Y (35 + ($i * 90deg));

          translate: 0 0 200px;

        }

      }

    }

  }

}

​

@keyframes rotate{

  0%{

    transform: translateZ(-2000px) rotateY(0deg) rotateZ(10deg);

  }

  50%{

    transform: translateZ(-1000px) rotateY(-360deg) rotateZ(-10deg);

  }

  100%{

    transform: translateZ(-2000px) rotateY(-720deg) rotateZ(10deg);

  }

}