Question

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.

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.

Relevant 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 has zero height and width, because you are positioning the images absolutely. That way 50% of zero is equal to 0%. Try giving it a width and height.