-webkit-transform 并忽略 z-index答案

【问题标题】：-webkit-transform and ignored z-index-webkit-transform 并忽略 z-index
【发布时间】：2014-08-05 14:58:55
【问题描述】：

在 safari 5.1.7 for windows 上，一些旋转的元素正在切割其他元素：

在其他浏览器 Firefox、Chrome、IE 上我得到：

有没有办法避免 safari 的“切割”问题？

显示问题的 jsfiddle here。

css:

.myFlip {
    width: 310px;
    margin: 20px auto;
    -moz-perspective: 780px;
    -webkit-perspective: 780px;
    perspective: 780px;
}
.myFlip li {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 100px;
    margin-right: -70px;
}
.test1 {
    background-color:green;
    z-index: 30;
    -moz-transform: rotateY(0deg) scale(1.2);
    -webkit-transform: rotateY(0deg) scale(1.2);
    transform: rotateY(0deg) scale(1.2);
}
.test2 {
    background-color:black;
    z-index: 10;
    -moz-transform: rotateY(45deg);
    -webkit-transform: rotateY(45deg);
    transform: rotateY(45deg);
}

html:

<ul class="myFlip">
    <li class="test1"></li>
    <li class="test2"></li>
</ul>

【问题讨论】：

标签： html css safari transform

【解决方案1】：

在大多数情况下，z-index 不适用于没有“位置”属性的元素。 Try this

例如：

position:relative;
z-index: 10;

我没有 Safari 浏览器来测试它。

【讨论】：

【解决方案2】：

找到以下内容：

通过使用 rotateY，我们为 2D 经典输出添加了一个新维度。在此浏览器中，z-index 不适用于 3D。

但是有一种方法可以解决我的问题：

.test1 {
  background-color:green;
  z-index: 30;
  -moz-transform: rotateY(0deg) scale(1.2);
  -webkit-transform: rotateY(0deg) scale(1.2) translate3d(0, 0, 50px);
  transform: rotateY(0deg) scale(1.2);
}

通过将translate3d 应用于.test1，绿色和黑色块不再在同一个 z 平面上。

test1 在 z 计划中 z=50px （没有 translate3d 它在 z=0px 上）

test2 是-50px<z<50px 之间的“倾斜”计划

【讨论】：