html - Chrome 中带有负 translateZ 的悬停元素

Question

我使用以下标记

<div class="container">
    <div class="item1"></div>
    <div class="item2"></div>
</div>

CSS

.container{
    perspective: 800px;
    transform-style: preserve-3d;
}
.item1{
    transform: translate3d(0, 0, -100px);
}
.item2{
    transform: translate3d(50px, 50px, -200px);
}

当悬停某个元素时，悬停的元素变成主体，而不是容器。为什么……？

http://jsfiddle.net/6mtzydha/

Answer 1

使用此 CSS，当您悬停它们时，它会更改 item1 或 item2 的背景。

.container{
 position: relative;
 width: 250px;
 height: 250px;
 perspective: 800px;
 transform-style: preserve-3d;
 background: rgba(255, 255, 0, 0.2);
}
.item1:hover, .item2:hover{
 background: rgba(255, 255, 0, 0.6);
}
.container div{
 position: absolute;
 width: 200px;
 height: 100px;
}
.item1{
 background: orange;
 transform: translate3d(0, 0, -100px);
}
.item2{
 background: teal;
 transform: translate3d(50px, 50px, -200px);
}

fiddle 链接 Here