Question

我知道3d变换和z索引不能很好地协同工作，但我有这个问题（仅限Safari），我希望它仍然存在解决方案。

基本上，我有2个元素在彼此之上。＆＃34; back＆＃34;中的那个（具有较低的z-index）在3d空间中旋转。不过，我仍然希望顶级元素始终处于最佳状态。

＆＃13;

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

＆＃13;

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

＆＃13;

这适用于Chrome和Firefox（还没有经过IE测试），但在Safari中，后面元素＆＃34;切入＆＃34;顶部元素，使顶部元素的一半不可见。

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

我已经在这里看到过有关此事的其他帖子，但它们似乎都已过时，解决方案似乎无法运作。

你可以在这里看到一个小提琴：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>

实际上，你不需要z-index: 2用于Safari，但仍然需要Chrome 没有在其他浏览器中签到。

Answer 2

＆＃13;

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

＆＃13;

3D变换，z-index和Safari

2 个答案: