同じ要素のCSS3回転とスケーリングが "z-インデックス"を壊す？

Question

そうでもないのzインデックスが、私は最高の短いタイトルで問題を記述することがわかった...

この簡単な例を参照してください：あなたは、画像の上に置くと、

http://jsfiddle.net/sCnDx/

をコーナーのいくつかは他の画像の下にあることに注意してください。

回転に関連するコードを削除すると、すべて正常に動作しています。問題は、回転またはスケーリングとの相互作用です。

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

これについて実行できることはありますか、これはブラウザのバグですか？

（Safariでテスト済み）

おかげで、 ウェズリー

Answer 1

はこのようにあなたのイメージに電子position:relativeをGIV @wesley：のみposition relative, absolute & fixedに取り組む

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ので。

チェックこのフィドルhttp://jsfiddle.net/sandeep/sCnDx/3/

Answer 2

Z-indexが私のために動作します。 http://jsfiddle.net/GY4Jp/

img
位置に追加します。
z-インデックス：1;

imgに追加：ホバー
ポジション：相対;
z-インデックス：2;