index.html

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Control Image Rotation</title>
</head>
<body>
  <main class="box">
    <span style="--i:1">
      <h2>Kha'Zix</h2>
      <img src="img/khazix.jpg" alt="Kha'Zix">
    </span>
    <span style="--i:2">
      <h2>Nocturne</h2>
      <img src="img/nocturne.jpg" alt="Nocturne">
    </span>
    <span style="--i:3">
      <h2>Jarvan</h2>
      <img src="img/jarvan.jpg" alt="Jarvan">
    </span>
    <span style="--i:4">
      <h2>Zac</h2>
      <img src="img/zac.jpg" alt="Zac">
    </span>
    <span style="--i:5">
      <h2>Olaf</h2>
      <img src="img/olaf.jpg" alt="Olaf">
    </span>
    <span style="--i:6">
      <h2>Karthus</h2>
      <img src="img/karthus.jpg" alt=Karthus>
    </span>
    <span style="--i:7">
      <h2>Gragas</h2>
      <img src="img/gragas.jpg" alt="Gragas">
    </span>
    <span style="--i:8">
      <h2>Skarner</h2>
      <img src="img/skarner.jpg" alt="Skarner">
    </span>
  </main>
</body>
</html>