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);

这个问题能否解决，还是浏览器的bug？

（在Safari中测试过）

谢谢， Wesley

- user429620

Answer 1

请将您的图片添加 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/

- sandeep

---

关于这个问题的最佳答案。对于所有寻找“翻译混淆z-index”问题的人，你需要正确地定义你的位置属性，然后就不会有问题了！ - cocoa coder

Answer 2

对于我来说，z-index很有效。http://jsfiddle.net/GY4Jp/

添加到img元素：
position: relative;
z-index: 1;

添加到img:hover元素：
position: relative;
z-index: 2;

- SeventotheSeven