javascript - div transforming from wrong origin point; ignoring transform-origin -


I'm trying to make this bike (div with pictures) the wheelery (css3 animation) onclick (javascript), the whole thing But despite the great work that changes the bike to the bikes caught-the root (this 0% 0% is moving too much, which is worse than that) (I removed all javascript and other css and deleted it Tested the way I thought it still rotates 0% 0%). I feel very confused because I did this before the division but maybe I am ignoring something only if you are thinking that everything is to be deployed, but before that the cause of this problem has never happened.

In addition, if you have any comments about my code, how can I clear it or if I am writing about a round then please tell me, I always make better I am trying to Thank you.

Contextual CSS: #wheel {status: Completed; Top: 293px; Left: 37px; Webkit-Animation: Tire 4S; Webkit - animation-repetition-count: infinite; Webkit-Animation-Timing-Function: Linear;} # Wheel2 {Position: Absolute; Top: 293px; Left: 315px; Webkit-Animation: Tire 4S; Webkit - animation-repetition-count: infinite; Webkit-animation-timing-function: linear;} #bike {status: absolute; Top: 130px; Left: 220px; } # Biskin {status: absolute; Top: 0px; Left: 0px; } @ -WebKit-keyframe wheeli {0% -VBKit-transform: rotate (0deg);} 50% {-VBKit-transform: rotate (-60 degree);} 100% {-VBKit-transform: rotate (0deg) ; }}

HTML:

  & lt; Div id = "bike" & gt; & Lt; Img src = "picture / p4 / wheel.png" alt = "title page" id = "wheel" /> & Lt; Img src = "picture / p4 / wheel.png" alt = "title page" id = "wheel2" /> & Lt; Img src = "picture / p4 / bike.png" alt = "title page" id = "bikin" /> & Lt; / Div & gt;   

Javascript:

  var bike = document.getElementById ('bike'); Function bike (event) {event.preventDefault (); Bike. Style.WebKit AnimationNana = 'Wheeler'; Bike. Style.webkitAnimationization period = '1s'; Bike.style.webkit animation drawdown count = '2'; Bike.style.webkittransferin = '80% 15% '; Bike. Click on = Faucet; Set timeout (function () (bike.style.webkitAnimationName = ''; bike.onclick = bikeAni;}, 2000);} Click on bike. = Bike Anne; # Height of twenty and width is zero, because you have images In this way, 50% of zero is equal to 0%. Try to give it width and height.   

Comments

Popular posts from this blog

mysql - BLOB/TEXT column 'value' used in key specification without a key length -

c# - Using Vici cool Storage with monodroid -

python - referencing a variable in another function? -