在 CSS 翻转中，变换元素不在顶部

Question

我有以下sn-p来说明这个问题。

根据我读过的所有内容，使用 transformZ 定位的元素应该在顶部，因为它们“更接近”。我无法使用 z-index 将活动/翻转的卡片放在“顶部”，因为在过渡期间会发生闪烁。然而，元素以浏览器的默认顺序定位，这意味着后面的元素位于顶部。变换样式和透视图都应用于父级。

为什么较近的元素不在顶部？

.card {
  position: relative;
  width: 33.333%; height: 12rem;
  float: left;
  transform-style: preserve-3d;
  perspective: 30rem;
}
.front, .back {
  position: absolute;
  width: 100%; height: 100%;
  transition: transform 1s;
  backface-visibility:hidden;
}
.front { 
  background-color: #66ccff; 
}
.back { 
  background-color: #dd8800; 
  transform: rotateY(180deg);
}
.card:hover .front{ transform: rotateY(180deg);}
.card:hover .back { transform: rotateY(360deg) translateZ(5em);}

.card2 {
  position: relative;
  width: 33.333%; height: 12rem;
  perspective: 30rem;
  float: left;
}
.front2, .back2 {
  position: absolute;
  width: 100%; height: 100%;
  transition: transform 1s;
  backface-visibility:hidden;
}
.front2 { 
  background-color: #66ccff; 
}
.back2 { 
  background-color: #dd8800; 
  transform: rotateY(180deg);
  z-index: 99;
}
.card2:hover .front2 { transform: rotateY(180deg);}
.card2:hover .back2 { transform: rotateY(360deg) translateZ(5em);} 

.card3 {
  position: relative;
  width: 33.333%; height: 12rem;
  perspective: 30rem;
  float: left;
}
.front3, .back3 {
  position: absolute;
  width: 100%; height: 100%;
  transition: transform 1s;
  backface-visibility:hidden;
}
.front3 { 
  background-color: #66ccff; 
}
.back3 { 
  background-color: #dd8800; 
  transform: rotateY(180deg);
  z-index: 99;
}
.card3:hover .front3 { transform: rotateY(180deg);}
.card3:hover .back3 { transform: rotateY(360deg) translateZ(5em);}

<div class="card">
  <div class="front">         
    <span>Front</span>
  </div>
  <div class="back">
    <span>Back</span>
  </div>
</div>
<div class="card2">
  <div class="front2">         
    <span>Front</span>
  </div>
  <div class="back2">
    <span>Back</span>
  </div>
</div>
  <div class="card3">
  <div class="front3">         
    <span>Front</span>
  </div>
  <div class="back3">
    <span>Back</span>
  </div>
</div>

Answer 1

这是因为persepctive的使用创建了一个堆叠上下文

将此属性与 0 和 none 不同的值使用会创建一个新的堆叠上下文。此外，在这种情况下，对象将充当位置的包含块：它包含的固定元素。^ref

所以你说的都是真的，但它发生在卡片元素内部，然后卡片元素根据树顺序进行定位。

一个简单的解决方法是调整卡片元素的z-index，考虑一些延迟以避免不良影响。

.card {
  position: relative;
  width: 33.333%; height: 12rem;
  float: left;
  transform-style: preserve-3d;
  perspective: 30rem;
  z-index:0;
  transition:z-index 0s .5s;
}
.front, .back {
  position: absolute;
  width: 100%; height: 100%;
  transition: transform 1s;
  backface-visibility:hidden;
}
.front { 
  background-color: #66ccff; 
}
.back { 
  background-color: #dd8800; 
  transform: rotateY(180deg);
}
.card:hover .front{ transform: rotateY(180deg);}
.card:hover .back { transform: rotateY(360deg) translateZ(5em);}

.card:hover {
 z-index:1;
}

<div class="card">
  <div class="front">         
    <span>Front</span>
  </div>
  <div class="back">
    <span>Back</span>
  </div>
</div>
<div class="card">
  <div class="front">         
    <span>Front</span>
  </div>
  <div class="back">
    <span>Back</span>
  </div>
</div>
<div class="card">
  <div class="front">         
    <span>Front</span>
  </div>
  <div class="back">
    <span>Back</span>
  </div>
</div