title: div transforming from wrong origin point; ignoring transform-origin
body: <p>I'm trying to make this bike(div with images) wheelie(css3 animation) onclick(javascript), the whole thing works great except that the div holding the bike is ignoring transform-origin (it's also rotating from 0% 0%, which is even worse)(I tested the div by deleting all javascript and other css that I thought would get in the way and it still rotated from 0% 0%). I find this very confusing because I have done this with divs before but perhaps I'm overlooking something. Just in case you're wondering everything has to be positioned absolutely but that has never cause this problem before. </p>
  
  <p>Also, if you have any comments about my code, how I could clean it up or if I writing in a round about way please let me know, I'm always trying to improve. Thanks. </p>
  
  <p>Relevant CSS:</p>
  
  <pre><code>#wheel{position:absolute; top:293px; left:37px; -webkit-animation:tire 4s; -webkit-    animation-iteration-count:infinite; -webkit-animation-timing-function: linear;}
  #wheel2{position:absolute; top:293px; left:315px; -webkit-animation:tire 4s; -webkit-   animation-iteration-count:infinite; -webkit-animation-timing-function: linear;}
  #bike{position:absolute; top:130px; left:220px; }
  #bikein{position:absolute; top:0px; left:0px; }
  @-webkit-keyframes wheelie{
  0%   {-webkit-transform: rotate(0deg);}
  50%   {-webkit-transform: rotate(-60deg);}
  100%   {-webkit-transform: rotate(0deg);}
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="bike"&gt;
  &lt;img src="images/p4/wheel.png" alt="title page" id="wheel" /&gt;
  &lt;img src="images/p4/wheel.png" alt="title page" id="wheel2" /&gt;
  &lt;img src="images/p4/bike.png" alt="title page" id="bikein"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>var bike = document.getElementById('bike');
  function bikeAni(event){
  event.preventDefault();
  bike.style.webkitAnimationName = 'wheelie';
  bike.style.webkitAnimationDuration = '1s';
  bike.style.webkitAnimationIterationCount = '2';
  bike.style.webkitTransformOrigin = '80% 15%';
  bike.onclick = null;
  setTimeout(function() {
      bike.style.webkitAnimationName = '';
      bike.onclick = bikeAni;
      }, 2000);
  }
  bike.onclick = bikeAni;
  </code></pre>