Question

我在容器中有几个div：

<div class="waves-container" id="waves_container">
    <div class="wave-wrapper wave-back">
        <img src="static/images/waves/sea_back.png" class="wave-top" />
        <div class="wave-bottom"></div>
    </div>
    <div class="wave-wrapper wave-front">
        <img src="static/images/waves/sea-front.png" class="wave-top" />
        <div class="wave-bottom" id="wave_bottom_front">Some additional divs are created here dynamically with JS</div>
    </div>
    <div class="play-button" id="play_button">
        <img src="static/images/ccs_shake_waves/play.png" />
    </div>
</div>

他们的CSS：

.waves-container {
width: 100%;
height: 50%;
position: absolute;
bottom: -35%;
-webkit-transition: bottom 0.4s ease-in-out;
}

.wave-wrapper {
width: 105%;
height: 130%;
position: absolute;
left: -5%;
}

.wave-top {
width:100%;
height: auto;
position:relative;
bottom: 0;
left: 0;
float: left;
}

.wave-bottom {
width: 100%;
height: 130%;
position: relative;
clear:both;
float: left;
background-color: #fd51df;
}

.wave-back {
-webkit-animation: wave 3s 1s infinite linear;
top: 1.5%;
}

.wave-front {
top: -12%;
-webkit-animation: wave 3s infinite linear;
}

.play-button {
width: 70%;
height: auto;
position: relative;
margin: 0 auto;
top: 50%;
-webkit-transform: translateY(-50%) scale(0, 0);
z-index:1;
display: none;
}

对于特定事件的JS，我将动画类附加到#play_button：

.pop-play {
-webkit-animation: flipInY 1s 1 forwards ease-out, play 3s 1s infinite linear;
}

在flipInY我在Y轴上设置此div的动画：

@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg) translateY(-50%);
    -webkit-transition-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg) translateY(-50%);
    -webkit-transition-timing-function: ease-in;
  }

  60% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg) translateY(-50%);
    opacity: 1;
  }

  80% {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg) scale(1.05, 1) translateY(-50%);
  }

  100% {
    -webkit-transform: perspective(400px) scale(1.1, 1) translateY(-50%);
    -webkit-transition-timing-function: ease-out;
  }
}

在Android中我看到它很好。但是在iOS中play_button div在Y轴上翻转时与底层div重叠，因此每当我看到50％的图像时，该div的其余部分就是＆＃34;＆＃34;另一个div。

我尝试将-webkit-transform: translate3d(0,0,0);添加到每个底层div，尝试更改z-indexes，尝试将其合并，尝试使用

-webkit-perspective: 1000;
-webkit-transform-style: preserve-3d;

在waves-container div和所有子div上，但它们仍然重叠，直到翻转动画结束而另一个开始。

为什么会发生这种情况？我该如何解决？

在其中一个上执行rotate3d动画时相互重叠

0 个答案: