-webkit-transform并忽略了z-index

Question

在safari 5.1.7 for windows中，一些旋转元素正在切换其他元素：

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

有没有办法避免削减＆＃39;野生动物园问题？

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>

Answer 1

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

例如：

position:relative;
z-index: 10;

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

Answer 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是一个＆＃39; Oblique＆＃39;计划-50px<z<50px

之间的某个地方