旋转卡动画故障答案

【问题标题】：Rotating Card Animation Glitching旋转卡动画故障
【发布时间】：2021-04-24 08:09:48
【问题描述】：

我正在尝试制作旋转卡片动画。但是，每当我在其中一侧使用一些position: absolute 元素时，动画就会出现故障，并且可以通过背面看到正面。到目前为止，它在 chrome 上是可以管理的，但在 Safari 上，如果没有这个错误，我的设计很难正常工作。以下是两个浏览器上的一些故障代码，请告知问题所在。

var isLeft = true;
var x = document.getElementById("card");

setInterval(function() {

  if (isLeft) {
    x.style.transform = 'rotateY(360deg)';
  }
  else {
    x.style.transform = 'rotateY(0deg)';
  }
  isLeft = !isLeft;
  
},5000);

.scene {
  width:480px;
  height:480px;
  perspective: 35em;
  position: absolute;
  left: 100px;
  top: 100px;
}

.card {
  width:220px;
  height:380px;
  left: 130px;
  top: 50px;
  position:absolute;
  transition: transform 4s;
  transform-style: preserve-3d;
}

.face {
  border-radius: 10px;
  width:100%;
  height:100%;
  
  color:#FFF;
/*   line-height:15em;
 text-align:center;*/
  position:absolute;
  
  backface-visibility:hidden;
  -webkit-backface-visibility: hidden;
}

.front {
    position:absolute;
background-color:white;
  /*border: 1px solid black;*/
}

.back {
    position:absolute;
  background-color:white;
  transform: rotateY(180deg);
  overflow: hidden;
  /*border: 1px solid black;*/
}

<div class="scene" id="scene">
  <div class="card" id="card">
    <div class="face front">

      <div style="width: 100%; height: 100%; background-color: purple; position: absolute;"></div>
      <div style="width: 100px; height: 100px; background-color: red; position: absolute;"></div>

      <div style="width: 100px; height: 100px; bottom: 0px; right: 0px; background-color: green; position: absolute;"></div>
      <div style="width: 30px; height: 30px; background-color: blue; position: absolute;"></div>

    </div>
    <div class="face back">

      <div style="width: 100%; height: 100%; position: absolute; color: white;">

    </div>
  </div>
</div>

【问题讨论】：

标签： javascript html css animation

【解决方案1】：

尝试将z-index: 1; 添加到.face 类中：

var isLeft = true;
var x = document.getElementById("card");

setInterval(function() {

  if (isLeft) {
    x.style.transform = 'rotateY(360deg)';
  }
  else {
    x.style.transform = 'rotateY(0deg)';
  }
  isLeft = !isLeft;
  
},5000);

.scene {
  width:480px;
  height:480px;
  perspective: 35em;
  position: absolute;
  left: 100px;
  top: 100px;
}

.card {
  width:220px;
  height:380px;
  left: 130px;
  top: 50px;
  position:absolute;
  transition: transform 4s;
  transform-style: preserve-3d;
}

.face {
  border-radius: 10px;
  width:100%;
  height:100%;
  
  color:#FFF;
/*   line-height:15em;
 text-align:center;*/
  position:absolute;
  
  backface-visibility:hidden;
  -webkit-backface-visibility: hidden;

  z-index: 1; /* works in MS Edge */
}

.front {
    position:absolute;
background-color:white;
  /*border: 1px solid black;*/
}

.back {
    position:absolute;
  background-color:white;
  transform: rotateY(180deg);
  overflow: hidden;
  /*border: 1px solid black;*/
}

<div class="scene" id="scene">
  <div class="card" id="card">
    <div class="face front">

      <div style="width: 100%; height: 100%; background-color: purple; position: absolute;"></div>
      <div style="width: 100px; height: 100px; background-color: red; position: absolute;"></div>

      <div style="width: 100px; height: 100px; bottom: 0px; right: 0px; background-color: green; position: absolute;"></div>
      <div style="width: 30px; height: 30px; background-color: blue; position: absolute;"></div>

    </div>
    <div class="face back">

      <div style="width: 100%; height: 100%; position: absolute; color: white;">

    </div>
  </div>
</div>

【讨论】：