在 CSS 翻转中，TransformZ 元素不在顶部

Question

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

根据我所阅读的所有内容，使用 transformZ 定位的元素应该在顶部 'closer.' 我无法使用 z-index 定位 active/flipped 卡片 'on top' 因为闪烁发生在过渡过程中。然而，这些元素是按照浏览器的默认顺序定位的，这意味着后面的元素在最上面。 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

在 CSS 翻转中，TransformZ 元素不在顶部

In CSS flip,TransformZ elements not on top

css

css-transforms

perspective