div從錯誤的原點轉換;忽略變換來源

我試圖讓這輛自行車（div與圖像）wheelie（css3動畫）onclick（javascript），整個事情工作很好，除了舉行自行車的div忽略轉換原點（它也在旋轉從0％0％，這是更糟糕的）（我測試的div刪除所有的JavaScript和其他CSS，我認爲會得到的方式，它仍然從0％0％旋轉）。我覺得這很混亂，因爲我之前用div做過這個，但也許我忽略了一些東西。以防萬一你想知道所有東西都必須定位，但從來沒有造成這個問題。另外，如果您對我的代碼有任何意見，我如何清理它，或者如果我圍繞方式寫一封信，請告訴我，我一直在努力改進。謝謝。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;

來源

2011-09-02 kugyousha

#bike具有零高度和寬度，因爲你絕對定位的圖像。這樣，零的50％等於0％。嘗試給它一個寬度和高度。

來源

2011-09-02 15:48:45 Gerben

完全正確。我完全忘了這一點，通常當我旋轉div時，我已經爲其他原因定義了寬度和高度。謝謝。 – kugyousha

div從錯誤的原點轉換;忽略變換來源

回答

相關問題