Question

我有以下代码段来说明此问题。

根据我阅读的所有内容，使用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且不创建任何新的堆叠上下文。同样，在这种情况下，对象将充当位置的包含块：它包含的固定元素。^ref

所以您说的都是对的，但它发生在card元素内部，然后考虑树的顺序放置了card元素。

一个简单的解决方法是考虑到一些延迟来调整卡片元素的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元素不在顶部

1 个答案: