转换旋转（）在 Firefox 中无法按预期工作答案

【问题标题】：Transform rotate() not working as expected in Firefox转换旋转（）在 Firefox 中无法按预期工作
【发布时间】：2021-03-31 22:44:51
【问题描述】：

我正在尝试使用 CSS 变换为 3D 立方体设置动画。在 Chrome 和 Safari 中，这按预期工作。然而，在 Firefox 中，旋转 90 度的立方体的“盖子”在旋转回 0 度之前无法正确显示。

我认为这可能是溢出 () 的问题，但这似乎没有帮助。我不知道我哪里出错了！

到目前为止，这是我的代码： 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 firefox css-transforms

【解决方案1】：

我不知道是什么导致了这个问题，但我会用更少的代码和没有问题的方式做不同的事情：

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>

【讨论】：

不幸的是，当双方展开在一起时，这会弄乱动画，但感谢您的尝试。我发现这个问题是由于 Firefox 没有将 transform-style: preserve-3d 传递给每个孩子
@wrgt 你在哪里看到的烂摊子？我复制了和你一模一样的动画

【解决方案2】：

对于其他有同样问题的人，我发现问题来自 Firefox 没有将transform-style: preserve-3d 传递给每个孩子。将此属性添加到包装器元素可解决此问题：

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

【讨论】：