问题
我试图让一个层看起来像一堵折叠的墙,露出它后面的层。我设置了两个固定的 div 位置。 “Wall”div 的 z-index 为 9999,“Background”div 的 z-index 为 0;
在我测试过的 Webkit 浏览器 (Safari/IOS) 中,似乎一旦动画在“墙”上开始,z-index 就会丢失或被忽略,导致“墙”层突然消失在背景分区。
关于如何保留图层的 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
查看 Safari 与 Chrome 的区别。
最佳答案
我的旋转元素不适合与背景相邻,但我通过应用修复了它
transform: translateZ(1000px);
transform-style: preserve-3d;
到旋转元素的父级。 Safari 现在认为它在背景前面 1000 像素。
关于html - webkit-transform 在 Safari 上破坏了 z-index,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22621544/