У меня есть два абсолютно позиционированных элемента 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.