В CSS перевернуть элементы TransformZ не сверху - PullRequest
Новая
       20

В CSS перевернуть элементы TransformZ не сверху

0 голосов
/ 14 декабря 2018

У меня есть следующий фрагмент, чтобы проиллюстрировать эту проблему.

Согласно всему, что я прочитал, элементы, расположенные с использованием 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>

1 Ответ

0 голосов
/ 14 декабря 2018

Это потому, что использование persepctive создает контекст стека

Использование этого свойства со значением, отличным от 0, и ни один из них не создает новый контекст стека.Кроме того, в этом случае объект будет действовать как содержащий блок для позиции: фиксированные элементы, которые он содержит. 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
...