У меня есть два абсолютно позиционированных элемента div, которые перекрываются. Оба имеют значения z-index через css. Я использую преобразование webkit translate3d для анимации этих элементов с экрана, а затем обратно на экран. После преобразования элементы больше не соответствуют установленным значениям z-index.
Может ли кто-нибудь объяснить, что происходит с z-index/stack-order элементов div, когда я делаю на них трансляцию webkit? И объясните, что я могу сделать, чтобы сохранить порядок стека элементов div?
Вот еще информация о том, как я делаю преобразование.
Перед преобразованием каждый элемент получает эти два значения перехода webkit, установленные через css (я использую jQuery для выполнения вызовов функции .css():
element.css({ '-webkit-transition-duration': duration + 's' });
element.css({ '-webkit-transition-property': '-webkit-transform' });
Затем элемент анимируется с помощью преобразования translate3d -webkit-transform:
element.css({ '-webkit-transform': 'translate3d(' + hwDelta + 'px, 0, -1px)' });
Btw, я попытался установить третий параметр translate3d на несколько разных значений, чтобы попытаться реплицировать порядок стека в 3d-пространстве, но не повезло.
Кроме того, браузер iPhone/iPad и Android - это мой целевой браузер, над которым этот код должен работать. Оба поддерживают переходы webkit.
Это может быть связано с: https://bugs.webkit.org/show_bug.cgi?id=61824
В основном, когда вы применяете 3D-преобразование по оси z, z-index больше не учитывается (теперь вы находитесь в трехмерной плоскости рендеринга, используйте разные значения z). Если вы хотите вернуться к 2D-рендерингу для дочерних элементов, используйте transform-style: flat;.
Это наиболее определенно связано с ошибкой, отмеченной samy-delux. Это должно влиять только на любые элементы, которые позиционируются как абсолютные или относительные. Чтобы исправить эту проблему, вы можете применить следующую инструкцию css к каждому элементу, который указан таким образом и вызывает проблемы:
-webkit-transform: translate3d(0,0,0);
Это применит преобразование к элементу без фактического выполнения преобразования, но влияет на его порядок визуализации, чтобы он был выше элемента, вызывающего проблему.
Бит Позднее, но попробуйте поместить элементы, которые потеряли свой Z-индекс, разместив следующее: у меня возникла проблема, когда делали некоторые вещи параллакса в последнее время, и это помогло в значительной степени.
transform-style: preserve-3d;
Это позволяет сохранить
transform: translate3d(0,0,0);
На других элементах, которые накладывают больше нагрузки на графический процессор
Ожидание, чтобы увидеть пример
Вы пытались сделать масштаб преобразования (1)? Я помню, что у меня была аналогичная проблема, и мне пришлось переупорядочить html-порядок элементов и использовать преобразование, которое мне не нужно, только потому, что z-индекс использования преобразования изменился.
Если я не ошибаюсь, каждый раз, когда вы используете преобразование, он становится самым высоким z-индексом, и он упорядочен ближайшим элементом html до начала тега. Итак, от донизу.
Я надеюсь, что эта помощь
z-index будет работать против 3d преобразованных divs, если вы ставите элемент с возможностью стекирования с помощью -webkit-transform: translateZ(0px);
Фрагмент на codepen → http://codepen.io/mrmoje/pen/yLIul
В этом примере кнопки stack up и stack down увеличивают и уменьшают индекс z нижнего колонтитула (+/- 1) против повернутого элемента (в этом случае img).
Я не смог воспроизвести описанную здесь проблему. Независимо от того, что я делаю, значение z-индекса сохраняется во всех преобразованиях. Я тестирую Chromium (Google Chrome).
Третий аргумент функции translate3d управляет осью z элемента. Концепция аналогична, но не совсем такой же, как z-index... Элементы с более низкой осью z находятся под элементами с более высоким значением.
Я знаю, что вы пробовали значения третьего аргумента в соответствии с вашим предполагаемым z-индексом, но проблема в том, что ось z не изменяется во время анимации CSS3. В следующем примере зависающий элемент должен быть сверху, но #element_a остается сверху.
Если я добавлю z-индекс как для обычного селектора, так и для селектора: наведите указатель мыши, он, похоже, работает и позволяет нависшему элементу быть самым большим.
Хотя это не совсем то, что вы искали, такое поведение обеспечивает решение. Вам просто нужно использовать translate3d и z-index, чтобы установить порядок первоначального рендеринга.
<style>
div {
width: 300px;
height: 150px;
background-color: white;
border: 5px outset gray;
float: left;
margin: 20px;
-webkit-transition: 2s;
}
#element_a {
-webkit-transform: translate3d(0, 0, 50px);
}
#element_b {
-webkit-transform: translate3d(0, 0, 100px);
}
#element_a:hover {
-webkit-transform: translate3d(100px, 0, 60px);
}
#element_b:hover {
-webkit-transform: translate3d(-100px, 0, -60px);
}
</style>
<body>
<div id="element_a">
<img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png">
</div>
<div id="element_b">
<img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png">
</div>
</body>
Другой способ заключается в том, что вы можете создать родительский элемент и применить все связанные с ним переходы:
# Apply transitions to a parent div
<div>
# This image z-index -1
<img src="foo"/>
# This image z-index -3
<img src="bar"/>
#This image z-index -2
<img src="gg"/>
</div>