相同元素的CSS3旋轉和縮放會混淆「z-index」？

Question

不是真正的z-index的，但我發現最好的描述問題的簡短標題...

看到這個簡單的例子：

http://jsfiddle.net/sCnDx/

如果你將鼠標懸停在圖片，你會注意到一些角落在其他圖像之下。

如果您刪除代碼有關的旋轉，所有工作正常。所以問題是，旋轉或它如何與縮放交互。

-webkit-transform: rotate(10deg); 
-moz-transform: rotate(10deg); 
-o-transform: rotate(10deg); 
transform: rotate(10deg); 

有沒有什麼可以做到這一點，或者這是一個瀏覽器的錯誤？

（經測試，在Safari瀏覽器）

感謝， 韋斯利

Answer 1

@wesley連鎖行業éposition:relative你的圖片是這樣的：

img { 
     -webkit-transform: rotate(10deg); 
     -moz-transform: rotate(10deg); 
     -o-transform: rotate(10deg); 
     transform: rotate(10deg); 

     -webkit-transition: -webkit-transform .15s linear; 
     -moz-transition: -moz-transform .15s linear; 
     -o-transition: -o-transform .15s linear; 
     transition: transform .15s linear; 
     position:relative; 
    } 
a img:hover { 
    -webkit-transform: scale(1.25) !important; 
    -moz-transform: scale(1.25) !important; 
    -o-transform: scale(1.25) !important; 
    transform: scale(1.25) !important; 
    position: relative; 
    z-index: 2; 
} 

因爲z-index上position relative, absolute & fixed只工作。

檢查此琴http://jsfiddle.net/sandeep/sCnDx/3/

Answer 2

Z-指數爲我工作。 http://jsfiddle.net/GY4Jp/

add to img
position：relative;
z-index：1;

添加到IMG：懸停
位置：相對;
z-index：2;