从错误的原点进行Div变换;忽视transform-origin

我试图使这个自行车(div与图像)wheelie(css3动画)onclick(javascript)，整个事情工作得很好，除了持有自行车的div忽略了transform-origin(它也从0% 0%旋转，这更糟)(我通过删除所有的javascript和其他css，我认为会得到的方式，它仍然从0% 0%旋转)。我发现这很令人困惑，因为我以前用潜水做过这个，但也许我忽略了一些东西。以防你想知道所有的东西都必须是绝对的，但这从来没有引起过这个问题。

还有，如果你对我的代码有任何评论，我该如何清理它，或者如果我写得有点绕圈子，请让我知道，我一直在努力改进。谢谢。

有关CSS:

#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);}
}

<div id="bike">
<img src="images/p4/wheel.png" alt="title page" id="wheel" />
<img src="images/p4/wheel.png" alt="title page" id="wheel2" />
<img src="images/p4/bike.png" alt="title page" id="bikein"/>
</div>

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;