title: Rotating a sprite and it moves out of place?
body: <p>I've got a sprite image with 4 frames. Each frame is around 50px in width, so the entire image is around 200px wide. It loops without stopping in the middle of the screen.</p>
  
  <p>I want to rotate the image upwards by around 20 degrees, but keep it in the middle of the screen. When I try to do that though, the center of the rotation seems to be around 100px in (it uses the 200px sprite image) instead of 25px in (the middle of each individual frame). So the sprite image will be moving in the middle of the screen, but when I apply <code>transform: rotate(-20deg)</code> it jumps around 75px to the right and up.</p>
  
  <p>The sprite image is located in a box, which is located in another box that is 50px in width. I'm applying the rotate to that 50px box.</p>
  
  <p>I've tried putting <code>-webkit-transform-origin</code> before <code>transform: rotate(20deg)</code> with several different values, but it doesn't seem to have any effect on the rotation. I've also tried turning the sprite's animation off, but it still happens. Does anyone know a fix to this?</p>
  
  <p>Here are the relevant bits of HTML:</p>
  
  <pre><code>&lt;div class="Box"&gt;
      &lt;div class="TopDiv"&gt;
          &lt;div class="MiddleDiv"&gt;
             &lt;div class="BottomDiv"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Relevant bits of css:</p>
  
  <pre><code>.Box{
      position: absolute;
      left: 50%;
      top: 50%;
      width: em(500px);
      height: em(500px);
      margin-left (em(-500px)/2);
      margin-top (em(-500px)/2);
      overflow-hidden;
  }
  
  .TopDiv{
      position:relative;
      width: em(50px);
      height: em(20px);
      background-size: 50px 20px;
   }
  
   .MiddleDiv{
       position: relative;
       width: em(50px);
       height: em(20px);
       overflow: hidden;
   }
   .BottomDiv{
       position: absolute;
       width: em(200px);
       height: em(20px);
       background-image: url('mysprite.jpg');
       background-size: 200px 20px;
       -webkit-animation playanimation 1s steps(4) infinite;
   }
  </code></pre>
  
  <p>I then use javascript to apply this on keydown:</p>
  
  <pre><code> .rotate{
       transform: rotate(-20deg);
   }
  </code></pre>