webkit-transform打破Safari上的z-index

问题描述

问题

我试图让一个图层看起来像是墙壁掉下来，露出背后的图层。我设置了两个固定的div位置。 Walldiv的z-index为9999，Backgrounddiv的z-index为0;

在Webkit浏览器我已经测试过，看起来像是一旦动画在墙上开始，z指数丢失或忽略，导致墙层在背景div后面突然消失。

有关如何保存图层的z索引的任何想法？先感谢！

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

HTML代码

 < div id = wall> 
这是墙
< / div> 
 
< div id =background> 
这是背景
< / div> 
 
< button id =startstyle =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; 
顶部：0; 
 left：0; 
 z-index：9999; 
} 
 
 #background {
 background-color：＃00F; 
 width：100px; 
 height：100px; 
 position：fixed; 
顶部：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

查看Safari和Chrome的差异。

解决方案

我的旋转元素不适合但我通过应用

修复它。

  transform：translateZ（1000px）; 
 transform-style：preserve-3d; 
  

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

Problem

I'm trying to make a layer appear like it's a wall falling down, revealing the layer behind it. I've setup two fixed div positions. The "Wall" div has a z-index of 9999, the "Background" div has a z-index of 0;

In Webkit browsers (Safari/IOS) that I've tested, it seems like once the animation starts on the "wall", the z-indexes are lost or ignored, causing the "wall" layer to abruptly disappear behind the background div.

Any ideas on how to preserve the z-indexes of the layers? Thanks in advance!

Example Code(note: jsFiddle at the bottom)

HTML Code

<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>

Some javascript to enable the button

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

CSS Code (cribbed from 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/

Check out the differences in Safari vs Chrome.

解决方案

My rotating element wasn't suitable to have a neighbour to the background, but I fixed it by applying

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

to the parent of the rotating element. Safari now thinks it's 1000px infront of the background.

这篇关于webkit-transform打破Safari上的z-index的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！