在图像后旋转两个图像

Question

我有两个图像（自行车车轮） 位于自行车车架图像的后面 ，但是当我使用Javascript旋转车轮时，它们似乎位于自行车车架图像的前面。

的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 1

为自行车div赋予z-index

Answer 2

为自行车的div赋予更高的z-index值

<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>  

Answer 3

应用以下CSS：

   #bike{
        z-index:2;
    }

    #wheel{
        z-index:1;
    }

Answer 4

将div放在html的div之前

要么

将z-index 1赋予自行车div