CSS3在相同元素上的旋转和缩放会混淆"z-index"？

Question

不是真正的z指数,但我发现最好用简短的标题来描述这个问题......

看到这个简化的例子:

http://jsfiddle.net/sCnDx/

如果将鼠标悬停在图像上,则会注意到某些角落位于其他图像下方.

如果删除与旋转有关的代码,则一切正常.所以问题在于旋转或它与缩放的交互方式.

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

有什么可以做到这一点或这是一个浏览器错误？

(在野生动物园测试)

谢谢,韦斯利

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/