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

Question

我要解决问题 img:

如何解决红色和紫色div之间折叠时的空白space！是不是因为视角属性？非常感谢！！！

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 {
  100% {
    transform: perspective(50px) rotateX(-8deg);
    height: 0;
  }
}

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

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

Answer 1

我刚刚添加了一个负边距来解决这个问题。请参阅代码段。

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

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

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>

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

how to resolve blank space between two div when fold

html

css

perspective