Я пытаюсь сделать этот велосипед (div с изображениями) wheelie (анимация css3) onclick (javascript), все работает отлично, за исключением того, что div, удерживающий велосипед, игнорирует transform-origin (он также вращается с 0%0%, что еще хуже) (я проверил div, удалив все javascript и другие css, которые, как я думал, будут мешать, и все равно повернул с 0% 0%).Я нахожу это очень запутанным, потому что я делал это раньше с divs, но, возможно, я что-то упускаю.На тот случай, если вам интересно, что все должно быть позиционировано абсолютно, но это никогда не вызывало этой проблемы раньше.
Кроме того, если у вас есть какие-либо комментарии о моем коде, о том, как я могу его почистить, или если я пишу по кругу о пути, пожалуйста, дайте мне знать, я всегда пытаюсь улучшить.Благодарю.
Соответствующий 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;