Firefox中的transform rotate()不像预期那样工作

Question

我正在尝试使用CSS转换来为一个三维立方体添加动画效果。在Chrome和Safari浏览器中，这个效果可以正常显示。但是在Firefox浏览器中，立方体的“盖子”旋转了90度后，直到又被旋转回0度才能正确显示。

我认为这可能与溢出（overflow）有关，但这似乎并没有帮助我解决问题。我不确定自己哪里做错了！

以下是我的代码：

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>

- wrgt

Answer 1

对于其他遇到相同问题的人，我发现这个问题是由于Firefox没有将transform-style:preserve-3d传递给每个子元素所导致的。将此属性添加到包装元素中即可修复问题：https://codepen.io/simonandywilson/pen/WNRRwKP。

- wrgt

Answer 2

我不知道是什么原因导致了这个问题，但我会用更少的代码和没有问题的方式来实现：

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>

- Temani Afif

---

不幸的是，当侧面一起展开时，这会破坏动画效果，感谢您的尝试。我已经发现，这个问题是由于Firefox没有将transform-style：preserve-3d传递给每个子元素造成的。 - wrgt

@wrgt 你在哪里看到混乱了吗？我已经复制了和你一模一样的动画。 - Temani Afif