3D 变换、z-index 和 Safari答案

【问题标题】：3D-transforms, z-index and Safari3D 变换、z-index 和 Safari
【发布时间】：2016-11-22 02:17:54
【问题描述】：

我知道 3d-transforms 和 z-indexes 不能很好地协同工作，但我遇到了这个问题（仅在 Safari 中），我希望仍有解决方案。

基本上，我有 2 个元素相互叠加。 “后面”中的那个（具有较低的 z 索引）正在 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 设置为父元素，但没有成功。

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

你可以在这里看到一个小提琴：https://jsfiddle.net/6mtgts33/

【问题讨论】：

标签： css safari css-transforms

【解决方案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 仍然需要它。
其他浏览器没检查过。

【讨论】：

【解决方案2】：

transform: rotateY(30deg);
-webkit-transform: rotateY(30deg);  //chrome and safari

【讨论】：