折叠时如何解决两个div之间的空格

Question

我想解决问题img：

如何在红色和紫色div之间折叠时解决空白区域！ 是否因为透视属性？ 非常感谢!!!

<div></div>
<div class="fold-div" id="div1"></div>
<div class="fold-div" id="div2"></div>
<div></div>

def is_enough_words_to_play_game?
  Word.verified.size > 5 ? true:false
end

Answer 1

我刚刚添加了一个负余量来解决这个问题。看到片段。

＆＃13;

＆＃13;

div {
  width: 200px;
  height: 100px;
  background: #333;
}

.fold-div {
  position: relative;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

#div1 {
  background: #d94f5c;
  animation-name: fold-top;
  transform-origin: top;
  margin-bottom: -10px; // negative margin
}

#div2 {
  background: #742fad;
  animation-name: fold-bottom;
  transform-origin: bottom;
}

@keyframes fold-top {
  100% {
    transform: perspective(50px) rotateX(-8deg);
    height: 0;
    margin-bottom: 0; // reset margin to 0 to avoid a glitch bug 
  }
}

@keyframes fold-bottom {
  100% {
    transform: perspective(50px) rotateX(8deg);
    height: 0;
  }
}

＆＃13;

<div></div>
<div class="fold-div" id="div1"></div>
<div class="fold-div" id="div2"></div>
<div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

启发Jinu Kurian的想法，我在动画开始时通过margin-bottom -10px解决问题！非常感谢Jinu Kurian !!!

div {
  width: 200px;
  height: 100px;
  background: #333;
}

.fold-div {
  position: relative;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

#div1 {
  background: #d94f5c;
  animation-name: fold-top;
  transform-origin: top;
}

#div2 {
  background: #742fad;
  animation-name: fold-bottom;
  transform-origin: bottom;
}

@keyframes fold-top {
  0% {
    margin-bottom: -10px;  // when animate, margin-bottom -10px
  }
  100% {
    transform: perspective(50px) rotateX(-8deg);
    height: 0;
  }
}

@keyframes fold-bottom {
  100% {
    transform: perspective(50px) rotateX(8deg);
    height: 0;
  }
}


thanks's Jinu Kurian, inspire by the idea, i resolve it when start animation 0% {
   margin-bottom: -10px
}

<div>
</div>
<div class="fold-div" id="div1"></div>
<div class="fold-div" id="div2"></div>
<div></div>