SOURCE

<div id="center">
  <div id="container">
    <div class="n">
      9
    </div>
    <div class="n">
      8
    </div>
    <div class="n">
      7
    </div>
    <div class="n">
      6
    </div>
    <div class="n">
      5
    </div>
    <div class="n">
      4
    </div>
    <div class="n">
      3
    </div>
    <div class="n">
      2
    </div>
    <div class="n">
      1
    </div>
    <div class="n">
      0
    </div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css?family=Roboto:700');
$primary-color: #F1E3F3;
$background-color: #3590F3;
$n: 10; // Number of numbers
$animation_duration: $n * 1s;
$size: 200px; // Width, height, font-size and line-height
html {
  font-family: 'Roboto', sans-serif;
  color: $primary-color;
  background-color: $background-color;
}

#center {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -$size/2;
  margin-top: -$size/2;
}

#container {
  position: absolute;
  width: $size;
  height: $size;
  perspective: 300px;
}

.n {
  position: absolute;
  top: 0px;
  left: 0px;
  width: $size;
  height: $size;
  transform: rotateY(90deg);
  text-align: center;
  font-size: $size;
  line-height: $size;
  user-select: none;
}

@for $i from 1 through $n {
  .n:nth-of-type(#{$i}) {
    animation: animate_#{$i} $animation_duration ease-in-out infinite;
  }
  @keyframes animate_#{$i} {
    0% {
      transform: rotateY( 90deg);
    }
    #{100%/$n*($i - 1)} {
      transform: rotateY( 90deg);
    }
    #{100%/$n*($i - 0.5)} {
      transform: rotateY( 0deg);
    }
    #{100%/$n*($i)} {
      transform: rotateY(-90deg);
    }
    100% {
      transform: rotateY(-90deg);
    }
  }
}