title: Div is not rotating around its centre using jquery keyframes
body: <p>I have two wheels divs. The wheels should rotate around their centre of origin but instead, they are doing a circular motion as shown below:</p>
  <p><a href="https://i.stack.imgur.com/2g9gB.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2g9gB.gif" alt="wheelDuringMotion" /></a></p>
  <p>This is the CSS code for the wheel:</p>
  <pre><code>    .wheel1 img{
          width: 210px;
          position: relative;
          top:-320px;
          left:42px;
          /*animation: wheelRotation linear .99s infinite;*/
      }
      .wheel2 img{
          width: 225px;
          position: relative;
          top: -540px;
          left: 255px;            
          /*animation: wheelRotation linear .99s infinite;*/
      }
  </code></pre>
  <p>I am using jQuery keyframes to enable CSS animation from javascript. For the wheels, I am using <code>wheelRotation</code> keyframe with <code>360deg</code> rotation angle.</p>
  <p>Below is how I add the animation sequence in JS:</p>
  <pre><code>   $.keyframe.define([{
              name: 'carMove',
              '100%': {
                  'transform': 'translateX(-500vw)'
              }
            }, {
              name: 'wheelRotation',
              '100%': {
                  'transform': 'rotate(360deg)'
              }
              }, {
                name: 'shake',
                '0%': {
                  'transform': 'translateY(-5px)'
                },
                '50%': {
                  'transform': 'translateY(5px)'
                },
                '100%': {
                  'transform': 'translateY(-5px)'
              }  
          }]);
      });
  </code></pre>
  <p>and this is how the animation is played:</p>
  <pre><code>    function play(animation) {
        
          $('.track').resetKeyframe(function() {
              switch (animation) {
                  case 'normal':
                  $('.wheel1').playKeyframe({
                      name: 'wheelRotation',
                      duration: &quot;5000ms&quot;,
                      timingFunction: 'linear',
                      iterationCount: 'infinite'
                    });
  
                  $('.wheel2').playKeyframe({
                    name: 'wheelRotation',
                    duration: &quot;5000ms&quot;,
                    iterationCount: 'infinite',
                    timingFunction: 'linear'
                  });
  
                  $('.track').playKeyframe({
                      name: 'carMove',
                      duration: &quot;13s&quot;,
                      timingFunction: 'linear',
                      iterationCount: 'infinite',
                      direction: 'normal',
                      fillMode: 'forwards'
                    });
  
                    $('.car').playKeyframe({
                      name: 'shake',
                      duration: &quot;3s&quot;,
                      timingFunction: 'linear',
                      iterationCount: 'infinite',
                      direction: 'normal',
                      fillMode: 'forwards'
                    });
                  break;
              }
              
          })
      }
  </code></pre>
  <p>the wheel and track animation are fine, but the wheel are not rotating around their centre of origin. Why is this happening? I am not sure where the problem is coming from. Any help would be appreciated.</p>