Question

我正在尝试制作旋转卡片动画。但是，每当我在其中一侧使用几个 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>

Answer 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>

旋转卡片动画故障

1 个答案: