Question

不是z-index，但我发现最好用简短的标题来描述这个问题......

请参阅此简化示例：

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

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

-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/

Answer 2

Z-index对我有用。 http://jsfiddle.net/GY4Jp/

添加到img
职位：亲属;
z-index：1;

添加到img：hover
职位：亲属;
z-index：2;

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

2 个答案: