Блог

У меня есть контейнер с двумя абсолютно расположенными элементами. При вращении контейнера при наведении, почему верхние элементы всегда остаются сверху, даже если контейнер повернут на 180 градусов. почему же тогда мы не видим нижний элемент?

 body {
  perspective: 1000px;
}

.container {
  margin: 20px 0 0 20px;
  position: relative;
  height: 400px;
  width: 250px;
  transition: all 3s;
}

.container:hover {
  transform: rotateY(180deg);
}

.item {
  position: absolute;
  height: 100%;
  width: 100%;
}

.item-1 {
  height: 120%;
  background: orange;
  /* z-index: -1; */
}

.item-2 {
  background: cyan;
  /*    z-index: 1; */
} 

 <div class="container">
  <div class=" item item-1"></div>
  <div class=" item item-2">Hover Over Me!</div>
</div> 

код: https://jsfiddle.net/rj5b9dhc/

У меня есть решение, но мне любопытно, почему приведенный выше код не работает

код решения: https://jsfiddle.net/512p9x3r/1/

Из backface-visibility: hidden; -за в пункте 2 css в коде решения.

Проверьте это: w3schools

Обновлено:
Когда .item высота (двух элементов) 100% .item-2 равна , в ней нет высоты css и покрытия 100% контейнера и .item-1 height есть 120% (это означает, что она height 20% больше .item-2 ) и покрытие 20% контейнера. Причина того , что .item-1 было раньше .item-2 , .item-1 будет проявляться дальше .item-2 .

как поясняется в Справке:

Это свойство полезно при повороте элемента. Это позволяет вам выбрать, должен ли пользователь видеть заднюю сторону или нет.

Когда контейнер повернется, .item-2 он будет скрыт.