Неправильное расположение элементов ребенка в 3D Transform

Question

Я в настоящее время есть DIV с изображением и 2-х детей, например так:

<div id="main"> 
    <div id="left"></div> 
    <div id="right"></div> 
    <img ... /> 
</div> 

я применяю 3D-преобразования для #main как так:

'transform':'perspective(800px) rotateX(0deg) rotateY(60deg)'; 

Вот CSS я для левого/правого:

#left, #right {width:50%;height:100%;position:absolute;z-index:999999;} 
#right {right:0;} 

Кликнув на eithe r влево или вправо переместится к предыдущему/следующему изображению. У меня также есть некоторые настройки события наведения курсора на левом/правом контейнерах. Он хорошо работает во всех браузерах, когда степени вращения равны 0.

Однако, всякий раз, когда я применяю rotateX или поворачиваюсь, у него есть некоторые нечетные проблемы с позиционированием только в Opera и Chrome.

Все остальные браузеры, похоже, отлично справляются с событиями левого/правого divs относительно 3D-преобразования. Однако в Opera и Chrome преобразования, похоже, запутываются при запуске мыши, мыши и нажатия событий в левом/правом div.

Чтобы сделать это еще более странным, это произойдет только на одном из дочерних элементов. Независимо от того, какая сторона #main расположена дальше в 3D-пространстве, возникают проблемы. DIV, который ближе всего к зрителю, все равно будет нависеть.

Я также добавил границы и цвета для каждого DIV, и это не актуальная проблема с позиционированием. Оба DIVs проявляются отлично.

Вот скриншот. Белая рамка применяется к #main. Внутри #main вы можете увидеть 2 левых/правых DIVs. Проблематичный (отодвинутый назад в пространстве) имеет белый градиент. Я применил фиолетовую рамку к каждой. На первом плане ярко-зеленый работает отлично.

Любые предложения были бы замечательными. Работает во всем, кроме Opera и Chrome. Спасибо!

Answer 1

Хорошо, поэтому, наконец, понял это и, надеюсь, поможет другим.

При работе в 3D-пространстве определенные браузеры будут правильно пересекать/закрепить другие элементы. Safari - один из этих браузеров. При вращении элемента в трехмерном пространстве, как на скриншоте выше, фактическое #main пересекает элемент фона. Правильный способ, которым браузер должен справиться с этим, - это отсечение части, которая входит в «элемент» за ней. Тем не менее, большинство браузеров не показывают отсечения и вместо этого отображает преобразованный элемент (хотя он пересекает другой элемент), как на скриншоте выше. Safari, однако, правильно обрабатывает это и будет отжимать часть #main, где она пересекает фон.

По какой-либо причине Chrome и Opera по-прежнему отображают #main при выполнении обрезки, однако любые события, связанные с преобразованным элементом, не будут уволены, потому что вы зависаете над фоновым элементом, а не элементом, который был трансформируются.

Все другие браузеры, которые не обрезают преобразованные элементы, будут запускать события на этих преобразованных элементах.

Решение состоит в том, чтобы отрегулировать ось Z преобразованного элемента.