April 2, 2012
Spinning Two Images BEHIND an Image
Question by Joe Isaacson
I have two images (bike wheels) that are positioned behind the bike frame image, but when I use Javascript to rotate the wheels, they appear to be in front of the bike frame image.
HTML
<div id="bike">
<img src="frame.png">
</div>
<div id="wheel">
<img class="spin" src="wheel.png">
<img class="spin" id="two" src="wheel.png">
</div>
JS
$(function() {
var $elie = $(".spin");
rotate(0);
function rotate(degree) {
$elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'});
$elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});
timer = setTimeout(function() {
rotate(++degree);
},10);
}
});
Answer by Starx
Give a higher z-index
value to the div with bike
<div id="bike" style="z-index: 2">
<img src="frame.png">
</div>
<div id="wheel" style="z-index: 1;">
<img class="spin" src="wheel.png">
<img class="spin" id="two" src="wheel.png">
</div>