Webkit игнорирует z-индексы для всего, что определено translate3d, как и должно быть логически.z-index предназначен для двухмерного мира, это все равно, что взять кучу бумаги и сказать «это сверху» - у вас все еще плоская поверхность.К сожалению, если вы хотите иметь возможность выбрать одну из «звездочек» внутри своего блока, вам почти не повезло, поскольку вы используете узлы HTML.
Обычный способ сделать этоиспользуя карту кликов - в основном каждый объект визуализируется дважды.Один раз в обычном режиме и один раз в одном цвете без затенения и т. Д. 2-й рендеринг никогда не показывается и просто используется, чтобы сказать, на что нажал пользователь.Вы получаете цвет, где они щелкнули, и этот цвет отображается на конкретный объект.Если бы вы использовали canvas, вы бы сделали это таким образом и просто изменили порядок рендеринга на втором рендере.
Поскольку вы используете узлы HTML, вы не можете этого сделать.У вас есть несколько вариантов:
- Вы можете рассчитать, какая звезда находится под мышью при перемещении мыши, основываясь на повороте области просмотра и положении звезды по x / y / z
- youМожно попробовать описанный выше метод, наложив идентичный рендеринг без куба и где звезды имеют непрозрачность 0%.Каждая звезда в вашем новом рендеринге будет отображаться на звезду в вашем существующем, и вы сможете легко обнаружить курсор мыши.
Опубликовать результаты!:)