Элемент, повернутый на 180 градусов, оказывается позади других элементов - PullRequest
Новая
       6

Элемент, повернутый на 180 градусов, оказывается позади других элементов

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

Я заметил необычное поведение, когда установлено transform-style: preserve-3d и элемент поворачивается на 180 градусов.Кажется, что это заставляет повернутый элемент отставать от других, как если бы для z-index было установлено более низкое значение.

Вот пример: 

.parent {
  transform-style: preserve-3d;
  position: relative;
}

.card {
  position: absolute;
  width: 100px;
  height: 100px;
}

.card.red {
  background-color: red;
}

.card.blue {
  background-color: blue;
}

.rotated {
  transform: rotateY(180deg);
}
<div class="parent">
  <div class="card red"></div>
  <div class="card blue rotated"></div>
</div>

При использовании Chrome (повернутая) синяя карточка сверху в HTML, но вместо этого красная карточка видна.Предоставление z-index синей карте также, кажется, не имеет никакого эффекта.

Я не мог найти это где-либо задокументировано - это глюк или ожидаемое поведение?Есть ли способ убедиться, что вместо этого отображается синяя карта (при сохранении transform-style: preserve-3d)?

Редактировать: кажется, что такое поведение отсутствует в Firefox.Однако неясно, является ли это проблемой с Chrome или Firefox.

Ответы [ 4 ]

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

transform-style:preserve-3d означает «дочерние элементы элемента должны быть расположены в (одном и том же) 3D-пространстве» .Это означает, что если вы примените к ним 3d-преобразования, они будут отображены соответствующим образом.

Теперь оба ваших элемента имеют одинаковое точное значение z-index.По умолчанию это auto, что соответствует 0.
Но если повернуть элемент на 180deg по оси Y или X, он в основном перевернется.Это означает, что он будет на другом конце того же значения z-index (потому что вы установили transform-style:preserve-3d).Это означает, что он будет на противоположном конце стека (от его обычной позиции - которая находится на вершине его предшествующих братьев и сестер).

Таким образом, вы либо даете ему определенно больший z-index, либо вы меняете их позиции.

Чтобы понять больше этого поведения, поиграйте с rotateY.При других значениях вы заметите, что видна только половина элемента, а эта половина ближе к вам, учитывая угол поворота в трехмерном пространстве.

При 90 и 270 градусах он будет невидим какон перпендикулярен (и не имеет ширины) и в 180 он «полностью» повернут в трехмерном пространстве, что означает, что он находится за другим элементом, который имеет то же значение z-index и (технически) »за "it.

" Еще одно "исправление" - удалить preserve-3d из родительского элемента (или переместить его в дочерний элемент, как предположил И.Джонсон), поэтому каждый из 2 элементов отображается в отдельном пространстве.и каждое представление этого пространства будет составлено в соответствии с их соответствующим положением элементов в контексте размещения.

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

, поскольку обе карты имеют одинаковый z-индекс, если вы измените свой HTML-код на: 

<div class="parent">
  <div class="card red"></div>
</div>
<div class="parent">
  <div class="card blue rotated"></div>
</div>

, он отобразит синюю

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

При использовании свойства transform-style оно должно использоваться вместе со свойством transform.

При добавлении свойства transform-style: preserve-3d; в класс .rotated отображается синяя карточка 

.rotated {
  transform: rotateY(180deg);
  transform-style: preserve-3d;
}

Пример: https://codepen.io/IanJohnson/pen/jXGVVo?editors=1100

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

Я думаю, это потому, что задняя часть DIV не обязательно того же цвета, что и передняя.Так что, вращаясь по оси Y, вы видите обратную / невидимую / прозрачную сторону DIV.Если вы поворачиваете по оси Z, у вас видна та же грань DIV.

Обновление: @fstanis указал, что моя прозрачная подложка была неправильной.Так что, если ось Z против Y все еще работает как ожидалось, то я на самом деле не знаю на 100% почему:) 

.parent {
  transform-style: preserve-3d;
  position: relative;
}

.card {
  position: absolute;
  width: 100px;
  height: 100px;
}

.card.red {
  background-color: red;
}

.card.blue {
  background-color: blue;
}

.rotated {
  transform: rotateZ(175deg);
}
<div class="parent">
  <div class="card red"></div>
  <div class="card blue rotated"></div>
</div>
...