Question

问题

我试图让一个图层看起来像一堵墙倒塌，露出它背后的层。我设置了两个固定的div位置。＆＃34; Wall＆＃34; div的z-index为9999，＆＃34;背景＆＃34; div的z-index为0;

在我测试的Webkit浏览器（Safari / IOS）中，似乎一旦动画在＃34;墙上开始播放，z-index就会丢失或被忽略，导致＆＃ 34;壁＆＃34;图层突然消失在背景div后面。

有关如何保留图层的z索引的任何想法？提前谢谢！

示例代码 （注意：底部的jsFiddle）

HTML代码

<div id="wall">
    This is the wall
</div>

<div id="background">
    This is the background
</div>

<button id="start" style="float: right;">
Flip Down
</button>

启用按钮的一些javascript

$('#start').click(function(){
    alert('Should Fall Down like a wall, revealing the background');
    $('#wall').addClass('animated flipDown');
});

CSS代码（来自animate.css）

#wall{
    background-color: #F00;
    width: 100px;
    height: 100px;
    position:fixed;
    top:0;
    left:0;
    z-index: 9999;
}

#background{
    background-color: #00F;
    width: 100px;
    height: 100px; 
    position:fixed;
    top:0;
    left:0;
    z-index: 0;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}


/*** flipDown ***/

@-webkit-keyframes flipDown {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    -webkit-transform-style: flat;
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    -webkit-transform-style: flat;
    opacity: 1;
  }
}

@keyframes flipDown {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    -ms-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    -ms-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}

.flipDown {
    -webkit-animation-name: flipDown;
    animation-name: flipDown;
    -webkit-backface-visibility: visible !important;
    -ms-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-transform-origin: bottom;
    -ms-transform-origin: bottom;
    transform-origin: bottom;
}

的jsfiddle

http://jsfiddle.net/3mHe2/2/

查看Safari与Chrome的差异。

Answer 1

我的旋转元素不适合与背景相邻，但我通过应用

修复了它

transform: translateZ(1000px);
transform-style: preserve-3d;

到旋转元素的父级。 Safari现在认为它是1000px的背景。

Answer 2

找到解决方案。希望这有助于将来的某个人。

事实证明，有一个＆＃34;错误＆＃34;在webkit的safari版本中。播放3d css动画时，原始z索引将丢失。相反，似乎动画片段被放入一个单独的z-index＆＃34; group＆＃34;这与DOM的其他z索引是分开的。

解决方案是将背景div和wall div连接到同一个z-index组，方法是将它包装在一个带有webkit变换的div中，该变换不会改变任何东西。这会导致背景和墙成为包装div的子项，并保留相应子项的z-indexing。

<div id="wrapper" style="-webkit-transform: translate3d(0px, 0px, 0px);">
    <div id="wall">
        This is the wall
    </div>

    <div id="background">
        This is the background
    </div>
</div>

我认为这与此相同或类似：

css z-index lost after webkit transform translate3d

Answer 3

我遇到了这个问题，在我将视角添加到应该落后的项目的父容器之前，没有什么能解决它。

.wrap{
    perspective: 1000px;
}

webkit-transform在Safari上打破了z-index

3 个答案: