在图像后面旋转两个图像

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

Answer 2

在html 中将车轮div放在自行车div之前

或

给自行车div 赋予z索引1

Answer 3

使用自行车给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 4

应用以下CSS：

   #bike{
        z-index:2;
    }
    #wheel{
        z-index:1;
    }