Why my code work fine on chrome but not firefox?-CodePudding

I am creating a split-flap. It works fine in Chrome, but in firefox, during the second rotation period, it is not smooth as in chrome. How can I fix it?

let baseDiv, lowerDiv, middleDiv, upperDiv;
document.addEventListener("DOMContentLoaded",()=>{
  baseDiv = document.getElementById("base");
  lowerDiv = document.getElementById("lower");
  middleDiv = document.getElementById("middle");
  upperDiv = document.getElementById("upper");
});
let backward = () => {
  lowerDiv.classList.add("rotate0to90");
}
let forward = () => {
  upperDiv.classList.add("rotate0to_90");
}

let upperHandler = () => {
  upperDiv.classList.replace("zIndex4", "zIndex2");
 middleDiv.innerHTML=baseDiv.innerHTML;
  middleDiv.className = "lowerHalfCard-after zIndex4 rotate90to0 transform0to90"
}
let lowerHandler = () => {
  lowerDiv.classList.replace("zIndex4", "zIndex2");
 middleDiv.innerHTML=baseDiv.innerHTML;
  middleDiv.className = "upperHalfCard-after zIndex4 rotate_90to0 transform0to_90";
}
let middleHandler = () => {
  upperDiv.innerHTML=baseDiv.innerHTML;
  lowerDiv.innerHTML=baseDiv.innerHTML;
  upperDiv.className = "upperHalfCard-after zIndex4";
  lowerDiv.className = "lowerHalfCard-after zIndex2";
  middleDiv.className = "hide";
}

.fullCard,
.lowerHalfCard,
.upperHalfCard,
.fullCard-after,
.lowerHalfCard-after,
.upperHalfCard-after {
  background-color: inherit;
  border-radius: 10px;
  height: 100%;
  width: 100%;
  position: absolute;
  align-items: center;
  display: flex;
  justify-content: center;
  vertical-align: middle;
}

.fullCard-after::after,
.upperHalfCard-after::after {
  content: "";
  display: block;
  position: absolute;
  height: 4px;
  background-color: inherit;
  width: 100%;
  top: calc(50% - 2px);
}

.lowerHalfCard-after::after {
  content: "";
  display: block;
  position: absolute;
  height: 4px;
  background-color: inherit;
  width: 100%;
  top: calc(50% - 2px);
}

.lowerHalfCard,
.lowerHalfCard-after {
  clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
}

.upperHalfCard,
.upperHalfCard-after {
  clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
}

.splitFlap {
  background-color: black;
  box-sizing: border-box;
  border-radius: 10px;
  width: 100px;
  height: 150px;
  position: relative;
}

.rotate0to90 {
  animation-name: r0to90;
}

.rotate90to0 {
  animation-name: r90to0;
}

.rotate0to_90 {
  animation-name: r0to_90;
}

.rotate_90to0 {
  animation-name: r_90to0;
}

.rotate0to90,
.rotate90to0,
.rotate0to_90,
.rotate_90to0 {
  animation-duration: 0.3s;
  animation-fill-mode: forwards;
}

@keyframes r0to90 {
  from {
    transform: rotateX(0deg);
  }
  to {
    transform: rotateX(90deg);
  }
}

@keyframes r90to0 {
  from {
    transform: rotateX(90deg);
  }
  to {
    transform: rotateX(0deg);
  }
}

@keyframes r0to_90 {
  from {
    transform: rotateX(0deg);
  }
  to {
    transform: rotateX(-90deg);
  }
}

@keyframes r_90to0 {
  from {
    transform: rotateX(-90deg);
  }
  to {
    transform: rotateX(0deg);
  }
}

.transform0to_90 {
  transform: rotateX(-90deg);
}

.transform0to90 {
  transform: rotateX(90deg);
}

.hide {
  display: none
}

.zIndex2 {
  z-index: 2;
}

.zIndex4 {
  z-index: 4;
}

.zIndex10 {
  z-index: 10;
}

.blue {
  background-color: blue
}

.green {
  background-color: green
}

.red {
  background-color: red
}

.orange {
  background-color: orange
}

<div >
  <div id="base" >
    <img src="img/1_100.png">
  </div>
  <div  id="upper" onAnimationEnd="upperHandler()">
    <img src="img/0_100.png">
  </div>
  <div id="middle"  onAnimationEnd="middleHandler()">
  </div>
  <div  id="lower" onAnimationEnd="lowerHandler()">
    <img src="img/0_100.png">
  </div>
</div>
<p>
  <button onClick="forward()">
               
            </button>
  <button onClick="backward()">
             -
            </button>
</p>

CodePudding user response：

After several tries, I have made it work properly by adding the following CSS attribute to the splitFlap class

transform-style: preserve-3d;

CodePudding user response：

Use the -moz- extension before all your transitions in CSS. That will make sure Mozilla "understands" it.

Example:

@keyframes r_90to0 {
  from {
    transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
  }
  to {
    transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
  }
}