使用translate3d Chrome不正确的z轴顺序

Question

在下面的HTML / CSS中有三个框;一个红色，一个蓝色和一个黄色。如果将鼠标悬停在蓝色框上，则会使用CSS transform: translate3d(0, 0, 5px)将其转换为z轴上的用户。这应该意味着在黄色和红色框前面绘制蓝框。

HTML

<div id="red"></div>
<div id="blue"></div>
<div id="yellow"></div>

CSS

div {
    margin: 20px;

    width: 100px;
    height: 150px;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;

    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    transition: 0.5s;

    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    transition-timing-function: ease-out;

    -webkit-transform: perspective(10px) translate3d(0, 0, 0);
    -moz-transform: perspective(10px) translate3d(0, 0, 0);
    transform: perspective(10px) translate3d(0, 0, 0);
}

#red {
    background-color: red;
}

#blue {
    background-color: blue;
}

#yellow {
    background-color: yellow;
}

#blue:hover {           
    -webkit-transform: perspective(10px) translate3d(0, 0, 5px);
    -moz-transform: perspective(10px) translate3d(0, 0, 5px);
    transform: perspective(10px) translate3d(0, 0, 5px);
}

jsfiddle

火狐

按预期行事

铬

不按预期行事。黄色方框在前面绘制！

这是一个错误吗？有工作吗？我该如何解决此问题jsfiddle？

Answer 1

如你所知：）

在呈现网页时，Chrome似乎忽略了转换的 z 值，而是恢复为Painter's Algorithm（首先定义的是先定义的）。你可以通过强迫#blue div比其兄弟姐妹拥有更大的z-index来解决这个问题，并让每个兄弟position: relative使更改生效：

#red, #yellow, #blue {
    position: relative;
}

#red, #yellow {
    z-index: 2;
}

#blue {
    z-index: 3;
}

Answer 2

首先，z-index解决方案（斯科特）是一个更好的解决方案，但这是一个替代方案，并解释了为什么会这样发生：

与#blue和#yellow相比，

#red位于其自己的合成图层中（当您将鼠标悬停在/ /或正在转换时）。您只需添加一个容器并添加一个转换，将#blue，#yellow和#red放在同一个合成图层中，此时预期效果（沿着{{1}转换的位置） }轴实际上放置一个元素在前面）将被尊重：

修改 这个答案确实有额外的优势，现在z（或者，无论哪个元素位于顶部）将是具有更高z转换的元素（将鼠标悬停在蓝色或黄色div上）

＆＃13;

＆＃13;

z-index

＆＃13;

/* place .container (and descendents) in the same composited layer */
.container {
    transform: translateZ(0);
}

div {
    margin: 20px;
    
    width: 100px;
    height: 150px;
    
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    transition: 0.5s;
    
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    
    -webkit-transform: perspective(10px) translate3d(0, 0, 0);
    -moz-transform: perspective(10px) translate3d(0, 0, 0);
    transform: perspective(10px) translate3d(0, 0, 0);
}

#red {
    background-color: red;
}

#blue {
    background-color: blue;
}

#yellow {
    background-color: yellow;
}

/* now you can see that whatever has the higher z translation will appear in front */
#yellow:hover,
#blue:hover {	
    -webkit-transform: perspective(10px) translate3d(0, 0, 5px);
    -moz-transform: perspective(10px) translate3d(0, 0, 5px);
    transform: perspective(10px) translate3d(0, 0, 5px);
}

＆＃13;

＆＃13;

＆＃13;