javascript - 从错误的原点转换的 div；忽略变换原点

Question

我正在尝试制作这辆自行车(带有图像的 div)wheelie(css3 动画)onclick(javascript)，整个过程都很好，除了拿着自行车的 div 忽略了变换原点(它也从 0% 开始旋转) 0%，这更糟)(我通过删除所有我认为会妨碍的 javascript 和其他 css 来测试 div，它仍然从 0% 0% 旋转)。我觉得这很令人困惑，因为我以前用 div 做过这个，但也许我忽略了一些东西。以防万一你想知道一切都必须绝对定位，但以前从未导致过这个问题。

此外，如果您对我的代码有任何意见，我可以如何清理它，或者如果我以循环方式编写，请告诉我，我一直在努力改进。谢谢。

相关 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);}
}

HTML:

<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>

Javascript:

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;

Answer 1

#bike 的高度和宽度为零，因为您是绝对定位图像。这样，零的 50% 等于 0%。尝试给它一个宽度和高度。