css - 3D 变换、z-index 和 Safari

Question

我知道 3d 变换和 z 索引不能很好地协同工作，但我遇到了这个问题(仅在 Safari 中)，我希望仍然有解决方案。

基本上，我有 2 个元素在彼此之上。 “后面”的那个(z-index 较低)在 3d 空间中旋转。但是，我仍然希望顶部元素始终位于顶部。

.button {
    padding: 10px 30px;
    position: relative;
    display: inline-block;
    color: white;
    cursor: pointer;
}
.button span {
    position: relative;
    z-index: 2;
}
.button:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background: red;
    transition: transform .2s;
}
.button:hover:after {
    transform: rotateY(30deg);
}

<div class="button">
    <span>Text</span>
</div>

这在 Chrome 和 Firefox 中运行良好(尚未测试 IE)，但在 Safari 中，后退元素“切穿”顶部元素，使顶部元素的一半不可见。

我尝试将 transform:translate3d(0,0,0) 设置为顶部元素，并将 transform-style:preserve-3d 设置为父元素，没有成功。

我在这里看到过其他关于此的帖子，但它们似乎都已过时，而且解决方案似乎也不起作用。

你可以在这里看到一个 fiddle :https://jsfiddle.net/6mtgts33/

Answer 1

添加以下内容:

.button span {
  display: inline-block;
  transform: translateZ(100px);
}

https://jsfiddle.net/6mtgts33/2/

.button { padding:10px 30px; position:relative; display:inline-block; color:white; cursor:pointer; }
.button span { position:relative; display: inline-block; transform: translateZ(100px); z-index: 2; }
.button:after { content:""; position:absolute; left:0; top:0; width:100%; height:100%; border-radius:10px; background:red; transition:transform .2s; }

.button:hover:after { transform:rotateY(30deg); }

<div class="button">
  <span>Text</span>
</div>

实际上，对于 Safari，您不需要 z-index: 2，但对于 Chrome 仍然需要它。
还没有在其他浏览器中检查过。