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或hover的背景。

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

小提琴链接Here

在chrome中使用负translateZ的悬停元素

1 个答案: