时间戳

首页 > 解决方案 > 转换旋转（）在 Firefox 中无法按预期工作

css - 转换旋转（）在 Firefox 中无法按预期工作

问题描述

我正在尝试使用 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>

标签： cssfirefoxcss-transforms

解决方案

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

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

推荐阅读