<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
<div class="card">6</div>
<div class="card">7</div>
<div class="card">8</div>
<div class="card">9</div>


<div class="round">
<div class="inround">1</div>
<div class="inround">2</div>
<div class="inround">3</div>
<div class="inround">4</div>
<div class="inround">5</div>
<div class="inround">6</div>
<div class="inround">7</div>
<div class="inround">8</div>
<div class="inround">9</div>
</div>

body {
  overflow-x: hidden;
  margin: 0;
  padding: 3mm;
  background-color: #445;
  text-align: center;
  color: #fff;
}

div{
  box-sizing: border-box;
}



.card{
  margin: 0 auto -30mm;
  width: 15mm;
  height: 30mm;
  padding: 0;
  border: 1mm solid #eef;
  background: #445;
  transition: all 0.2s linear;
  transform: translate( calc( ( (
    var(--num) - var(--off)
    + var(--count) * var(--ovf)
  ) ) * 17mm ), 0 );
  --count: inherit;
  --off: inherit;
}

.card.active{
  background: #ccb;
}


.round{
  margin: 40mm auto 5vh;
  width: 60mm;
  height: 60mm;
  border-radius: 50%;
  border: 1mm solid #eef;
  position: relative;
}

.inround{
  margin: -4.5mm;
  width: 8mm;
  height: 8mm;
  border-radius: 4.5mm;
  border: 1mm solid #eef;
  position: absolute;
  top: 30mm;
  left: 30mm;
  background: #445;
  transition: all 0.2s linear;
  transform: rotate( calc( var(--angle) * 1rad ) ) translate( 30mm, 0 ) rotate( calc( var(--angle) * -1rad ) );
}

.inround.active{
  margin: -4.5mm -11.5mm;
  width: 21mm;
}

const qs = ( a, n ) => ( n || document ) ?. querySelector( a );
const qsa = ( a, n ) => [ ...( n || document ) ?. querySelectorAll( a ) || [] ];

const body = document.body;
const cards = qsa( '.card' );
const rounds = qsa( '.inround' );
const dPi = 2 * Math.PI;
const hPi = dPi / 4;
const count = cards.length;

body.style.setProperty( '--count', cards.length );
cards.forEach( (c,i) => c.style.setProperty( '--num', i ) );

( function f( off ) {
  cards.forEach( ( c, i ) => {
    const roff = ( i - off );
    const r = rounds[ i ];
    body.style.setProperty( '--off', off );
    c.style.setProperty( '--ovf', roff < 0 ? 1 : 0 );
    r.style.setProperty( '--angle', -dPi * roff / count + hPi );
    c.classList.toggle( 'active', i === off );
    r.classList.toggle( 'active', i === off );
  } );
  setTimeout( f, 1000, ( off + 1 ) % count );
}) ( 0 );