title: Cannot make the hover effect work for all children
body: <p>I'm trying to apply a 3d rotation hover effect on the child elements of a container, but I'm having difficulty to make it work with <code>for</code> loop. Code works fine when I remove the loop and <code>[i]</code> tags, and use the effect on a single element, but it doesn't when I try to apply the effect on all child elements. Do you know what part I'm doing wrong?</p>
  <pre><code>let rotate = document.getElementsByClassName(&quot;group&quot;)[0].getElementsByTagName(&quot;a&quot;);
  var i; 
  for (i=0; i&lt;rotate.length; i++) {
      const height = rotate[i].clientHeight;
      const width = rotate[i].clientWidth;
      rotate[i].addEventListener('mousemove', handleMove)
  
      function handleMove(e) {
          const xVal = e.layerX;
          const yVal = e.layerY;
          const yRotation = 20 * ((xVal - width / 2) / width);
          const xRotation = -20 * ((yVal - height / 2) / height);
          const string = 'perspective(500px) scale(1.1) rotateX(' + xRotation + 'deg) rotateY(' + yRotation + 'deg)';
          rotate[i].style.transform = string;
      }
      rotate[i].addEventListener('mouseout', function() {rotate[i].style.transform = 'perspective(500px) scale(1) rotateX(0) rotateY(0)'})
      rotate[i].addEventListener('mousedown', function() {rotate[i].style.transform = 'perspective(500px) scale(0.9) rotateX(0) rotateY(0)'})
      rotate[i].addEventListener('mouseup', function() {rotate[i].style.transform = 'perspective(500px) scale(1.1) rotateX(0) rotateY(0)'})
  }
  </code></pre>
  <p><a href="https://codepen.io/technokami/pen/abojmZa" rel="nofollow noreferrer">https://codepen.io/technokami/pen/abojmZa</a></p>