<div id="main">
  <span style="--pos: 0">0</span>
  <span style="--pos: 1">1</span>
  <span style="--pos: 2">2</span>
  <span style="--pos: 3">3</span>
  <span style="--pos: 4">4</span>
  <span style="--pos: 5">5</span>
  <span style="--pos: 6">6</span>
  <span style="--pos: 7">7</span>
  <span style="--pos: 8">8</span>
  <span style="--pos: 9">9</span>
</div>

*{margin: 0; padding: 0; box-sizing: border-box; border: 0;}

body{
  margin:0 auto;
  font-size: 5mm;
  line-height: 5mm;
  font-family: Sans, Verdana, Calibri;
  text-align: center;
  vertical-align: text-top;
  background: #224;
  color: #cce;
  perspective: 200mm;
}

#main{
  --cur: 5;
  position: relative;
  width: 30mm;
  height: 100mm;
  margin: 0 auto;
  padding-top: 40mm;
  transform-style: preserve-3d;
}
#main *{
  transform-style: preserve-3d;
}
#main span{
  --cur: inherit;
  display: block;
  margin-top: -9mm;
  padding: 2mm;
  /*border: 1px solid #fff;*/
  transition: transform 0.2s;
  transform:
    rotateY( 10deg )
    rotateX( calc( ( var(--pos) - var(--cur) ) * -8deg ) )
    translateZ( 60mm );
}
#main span:hover{
  background: rgba( 255,255,255,0.3 );
  transform:
    rotateY( 10deg )
    rotateX( calc( ( var(--pos) - var(--cur) ) * -8deg ) )
    translateZ( 61mm );
  text-shadow: -0.8mm calc( ( var(--pos) - var(--cur) ) * -0.15mm ) 0mm rgba(0,0,50,0.3);
}

#main:before{
  content:'';
  position: absolute;
  left: -10mm; top: 30mm;
  width: 50mm;
  height: 10mm;
  background: rgba(255,196,255,0.3);
  transform-style: preserve-3d;
  transform:
    rotateY( 10deg )
    translateZ( 50mm );
}

const main = document.querySelector( '#main' );
document.querySelectorAll( '#main span' ).forEach( (s,i) => {
  s.onclick = e => main.style.setProperty( '--cur', i );
} )