相同元素的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;