css - 在CSS flip中，TransformZ元素不在最上面

Question

我有以下片段来说明这个问题。

根据我所阅读的所有内容，使用 transformZ 定位的元素应该在顶部，因为它们“更近”。我无法使用 z-index 将事件/翻转的卡片定位在“顶部”，因为在转换过程中会发生闪烁。然而，这些元素是按照浏览器的默认顺序定位的，这意味着后面的元素在最上面。 Transform-style 和 perspective 都应用于父级。

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

.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创建了层叠上下文

Using this property with a value different than 0 and none creates a new stacking context. Also, in that case, the object will act as a containing block for position: fixed elements that it contains.^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