CSS 3D-трансформации и Zindex бои

Question

У меня есть два <div> элемента, которые перекрывают друг друга, например:

 -------------
 |           |
 |     A     |
 |           |
 |   ------------
 |   |          |
 |   |          |
 ----|     B    |
     |          |
     ------------

Поэтому я добавляю B в DOM после A. Внутри div AI есть некоторые другие html-элементы (изображения), которые я применяю css3dтрансформируется в, однако, когда я делаю это, они также появляются перед div B, я всегда хочу, чтобы div B был выше div A и всего его содержимого.Я попытался установить свойство z-index для обоих элементов div, но элементы, преобразованные в 3d в A, по-прежнему отображаются поверх div B.

Есть ли способ всегда заставить B отображаться напротив A и его содержимого?

Спасибо, Марк.

Answer 1

Если вам нужен элемент z-index для работы с преобразованными 3d-элементами, вы должны присвоить ему стиль -webkit-transform: translateZ(0px);

Фрагмент кода -> http://codepen.io/mrmoje/pen/yLIul

Answer 2

Работает: http://jsfiddle.net/qkLWH/1/