title: Why animation is not working for all class element?
body: <p>My animation is not working for all the images but only for the first image. I want to move the images when the mouse is enter and move in the image.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var container = document.querySelector(".movement"),
            inner = document.querySelector(".product");
  
        // Mouse
        var mouse = {
          _x: 0,
          _y: 0,
          x: 0,
          y: 0,
          updatePosition: function(event) {
            var e = event || window.event;
            this.x = e.clientX - this._x;
            this.y = (e.clientY - this._y) * -1;
          },
          setOrigin: function(e) {
            this._x = e.offsetLeft + Math.floor(e.offsetWidth / 2);
            this._y = e.offsetTop + Math.floor(e.offsetHeight / 2);
          },
          show: function() {
            return "(" + this.x + ", " + this.y + ")";
          }
        };
  
        // Track the mouse position relative to the center of the container.
        mouse.setOrigin(container);
        var counter = 0;
        var refreshRate = 10;
        var isTimeToUpdate = function() {
          return counter++ % refreshRate === 0;
        };
       var onMouseEnterHandler = function(event) {
          update(event);
        };
  
        var onMouseLeaveHandler = function() {
          inner.style = "";
        };
  
        var onMouseMoveHandler = function(event) {
          if (isTimeToUpdate()) {
            update(event);
          }
        };
        var update = function(event) {
          mouse.updatePosition(event);
          updateTransformStyle(
            (mouse.y / inner.offsetHeight / 2).toFixed(2),
            (mouse.x / inner.offsetWidth / 2).toFixed(2)
          );
        };
  
        var updateTransformStyle = function(x, y) {
          var style = "rotateX(" + x + "deg) rotateY(" + y + "deg)";
          inner.style.transform = style;
          inner.style.webkitTransform = style;
          inner.style.mozTranform = style;
          inner.style.msTransform = style;
          inner.style.oTransform = style;
        };
        container.onmousemove = onMouseMoveHandler;
        container.onmouseleave = onMouseLeaveHandler;
        container.onmouseenter = onMouseEnterHandler;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.movement {
        perspective: 100px;
      }
  .product{
        transition: transform 0.5s;
        -webkit-transition: transform 0.5s;
        -moz-transition: transform 0.5s;
        -o-transition: transform 0.5s;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
              &lt;div class="row"&gt;
                &lt;div class="col-md-6 col-sm-6 movement"&gt;
                  &lt;img class="product" src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&amp;fit=crop&amp;w=1953&amp;q=80"&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="row"&gt;
                &lt;div class="col-md-6 col-sm-6 movement"&gt;
                    &lt;img class="product" src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&amp;fit=crop&amp;w=1953&amp;q=80"&gt;
                &lt;/div&gt;
           
              &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I want to transform the image according to the mouse position. Suppose, the mouse position is (112,80) then the image will rotate rotateX(112deg), rotateY(80 deg) How can I SOLVE THIS PROBLEM?</p>