body,

html {

  width: 100%;

  height: 100%;

  display: flex;

}

​

$imgCount: 4;

​

.perspective {

  margin: auto;

  transform-style: preserve-3d;

  perspective: 3000px;

}

​

.container {

  width: 400px;

  height: 400px;

  transform-style: preserve-3d;

  animation: rotate 40s linear infinite;

​

  .img {

    position: absolute;

    width: 400px;

    height: 400px;

    line-height: 400px;

    text-align: center;

    font-size: 120px;

    top: 0;

    left: 0;

  }

  @for $i from 1 through $imgCount {

    .img:nth-child(#{$i}) {

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

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

    }

  }

}

​

@keyframes rotate {

  0% {

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

  }

  50% {

    transform: translateZ(-2000px) rotateY(-360deg) rotateZ(-30deg);

  }

  100% {

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

  }

}

​