css z-індекс, втрачений після перетворення webkit translate3d

У мене є два абсолютно розміщені елементи Div, які перекриваються. Обидва встановили значення z-індексу через css. Я використовую translate3dперетворення webkit, щоб анімувати ці елементи з екрану, а потім повернутися на екран. Після перетворення елементи більше не поважають їх встановлені z-indexзначення.

Чи може хтось пояснити, що відбувається з z-індексом / стеком-порядком елементів div, коли я перетворять на них веб-перетворення? І поясніть, що я можу зробити для збереження порядку складання елементів 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)' });

До речі, я спробував встановити 3-й параметр translate3dна кілька різних значень, щоб спробувати повторити порядок стека в 3d-просторі, але не пощастило.

Крім того, браузери iPhone / iPad та Android - це мій цільовий браузер, на якому цей код потрібно працювати. Обидва підтримують переходи веб-кайтів.

Це може бути пов’язано з: https://bugs.webkit.org/show_bug.cgi?id=61824

В основному, коли ви застосовуєте 3D-перетворення на осі z, z-індекс більше не можна обліковувати (зараз ви знаходитесь в тривимірній площині візуалізації, використовуйте різні z-значення). Якщо ви хочете повернутися до двовимірного візуалізації для дочірніх елементів, використовуйте transform-style: flat;.

Це, безумовно, пов’язано з помилкою, яку зазначив samy-delux. Це має впливати лише на будь-які елементи, розміщені як абсолютні або відносні. Щоб виправити проблему, ви можете застосувати наступний оператор css до кожного елемента, розміщеного таким чином і викликає проблеми:

-webkit-transform: translate3d(0,0,0);

Це застосує перетворення до елемента, фактично не зробивши перетворення, але вплине на його порядок рендерінгу, тому він знаходиться вище елемента, що викликає проблему.

Трохи пізно до цього, але спробуйте вкласти елементи, які втратили свій Z-індекс, розміщуючи наступне, у мене виникла проблема, коли я робив деякі паралаксальні речі останнім часом, і це допомогло масово.

transform-style: preserve-3d;

Це економить розміщення

transform: translate3d(0,0,0);

Щодо інших елементів, що створює більше навантаження на GPU

Чекаю, щоб побачити приклад

Ви намагалися зробити шкалу перетворення (1)? Пам’ятаю, у мене була подібна проблема, і мені довелося перевпорядкувати html-порядок елементів і використовувати перетворення, яке мені не потрібно, лише тому, що змінився z-індекс використання перетворення.

Якщо я не помиляюся, щоразу, коли ви використовуєте перетворення, він стає найвищим доступним z-індексом, і він упорядковується найближчим елементом html - до початку тегу. Так зверху вниз.

Я сподіваюся, що це допоможе

z-index буде працювати проти 3D-трансформованих дівок, якщо ви стилізуєте стикувальний елемент -webkit-transform: translateZ(0px);

Знімок на codepen -> http://codepen.io/mrmoje/pen/yLIul

У прикладі, кнопка stack upі stack downпіднімати і опускати Z-індекс нижнього колонтитула в (+/- 1) проти повернутого елемента (An IMG в даному випадку).

Я не зміг відтворити описану тут проблему. Незалежно від того, що я роблю, значення z-індексу зберігається протягом усіх перетворень. Я тестую за допомогою Chromium (Google Chrome).

Третій аргумент функції translate3d маніпулює осі z елемента. Поняття подібне, але не зовсім те саме, що z-індекс ... Елементи з нижньою віссю 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>

JsFiddle