Transform rotate() not working as expected in Firefox

user_10941707 0
Viewed 454

I'm attempting to animate a 3D cube using CSS transforms. In Chrome and Safari this works as expected. In Firefox however, the 'lids' of the cube, which are rotated 90deg, don't display correctly until they are rotated back to 0deg.

I thought this might be an issue with overflow () but this doesn't seem to help. I'm not sure where I'm going wrong!

Here's my code so far: https://codepen.io/simonandywilson/pen/RwGrgYJ

html body {
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  overflow: hidden;
  background: #808080;
}

.leftContainer,
.rightContainer {
  width: 50%;
  height: 100%;
  position: relative;
  display: flex;
  transform-style: preserve-3d;
}

.leftContainer {
  z-index: 99;
  transform-origin: bottom right;
  justify-content: flex-end;
  transform: rotateX(-25deg) rotateY(-45deg);
  animation: flatternLeft 2s 4s 1 forwards;
}

.rightContainer {
  transform-origin: bottom left;
  justify-content: flex-start;
  transform: rotateX(-25deg) rotateY(45deg);
  animation: flatternRight 2s 4s 1 forwards;
}

.face {
  position: relative;
  width: 50vh;
  height: 50vh;
  background: #ffffff;
  border: solid 2px #0000ff;
}

.leftTop {
  transform-origin: bottom right;
  transform: rotateX(90deg);
  animation: rotateLid 2s 1 forwards;
}

.rightTop {
  transform-origin: bottom left;
  transform: rotateX(90deg);
  animation: rotateLid 2s 2s 1 forwards;
}

@keyframes rotateLid {
  from {
    transform: rotateX(90deg);
  }

  to {
    transform: rotateX(0deg);
  }
}

@keyframes flatternLeft {
  from {
    transform: rotateX(-25deg) rotateY(-45deg);
  }

  to {
    transform: rotateX(0deg) rotateY(0deg);
  }
}

@keyframes flatternRight {
  from {
    transform: rotateX(-25deg) rotateY(45deg);
  }

  to {
    transform: rotateX(0deg) rotateY(0deg);
  }
}
<div class="leftContainer">
  <div class="cube">
    <div class="face leftTop"></div>
    <div class="face leftBottom"></div>
  </div>
</div>

<div class="rightContainer">
  <div class="cube">
    <div class="face rightTop"></div>
    <div class="face rightBottom"></div>
  </div>
</div>

css-transforms firefox css
2 Answers

I don't know what is causing the issue but I would do it differently with less of code and without the issue:

body {
  margin:0;
  background: #808080;
}
.container {
  display: grid;
  margin:10vh auto;
  width:80vh;
  grid-template-rows:repeat(2,40vh);
  grid-template-columns:repeat(2,1fr);
  transform-style: preserve-3d;
  transform: rotateX(-25deg);
}

.container > * {
  background: #ffffff;
  border: solid 2px #0000ff;
  transform-origin: bottom right;
}
.container > *:nth-child(even) {
   transform-origin: bottom left;
}

.leftTop { 
  transform: rotateY(-45deg) rotateX(90deg);
  animation:
   leftop linear 1s forwards,
   face linear 1s forwards 2s;
}
.leftBottom {
   transform: rotateY(45deg) rotateX(90deg);
   animation:
     leftBottom linear 1s forwards 1s,
     face linear 1s forwards 2s;
}
.rightTop {
  transform: rotateY(-45deg);
  animation:face linear 1s forwards 2s;
}
.rightBottom {
  transform: rotateY(45deg);
  animation:face linear 1s forwards 2s;
}
@keyframes leftop{
   to {transform: rotateY(-45deg) rotateX(0deg)}
}
@keyframes leftBottom{
   to {transform: rotateY(45deg) rotateX(0deg)}
}
@keyframes face{
   to {transform: rotateY(0deg)}
}
<div class="container">
  <div class="leftTop"></div>
  <div class="leftBottom"></div>
  <div class="rightTop"></div>
  <div class="rightBottom"></div>
</div>

user_86203330

For anyone else that has the same problem, I've discovered that the issue comes from Firefox not passing transform-style: preserve-3d to each child. Adding this property to the wrapper element fixes the issue:

https://codepen.io/simonandywilson/pen/WNRRwKP

user_109417070
Related