-moz-transform ошибка z-index? - PullRequest
       11

-moz-transform ошибка z-index?

2 голосов
/ 14 октября 2011

В этот тестовый пример , без -moz-transform: rotate(-31deg);, желтая рамка видна (как и должно быть).Но если я добавлю это, то желтое поле не будет видно, несмотря на то, что z-index равно 999.

Почему?

1 Ответ

2 голосов
/ 14 октября 2011

Это не ошибка, это преднамеренно: поведение по умолчанию при преобразовании элемента заключается в том, чтобы сначала сгладить преобразованные элементы в один слой.

Ответ на ваш вопрос заключается в CSS transform-style свойство, которое переопределяет это поведение по умолчанию и позволяет поддерживать порядок z-index отдельных элементов, вложенных в преобразуемый элемент.

Как описано в документации W3C :

Свойство transform-style определяет способ отображения вложенных элементов в трехмерном пространстве.Если «transform-style» имеет значение «flat», все дочерние элементы этого элемента визуализируются сглаженными в 2D-плоскости элемента.Следовательно, вращение элемента вокруг осей X или Y приведет к тому, что дочерние элементы, расположенные в положительных или отрицательных позициях Z, появятся на плоскости элемента, а не перед или позади него.Если 'transform-style' - 'preserve-3d', это выравнивание не выполняется, поэтому дети сохраняют свое положение в трехмерном пространстве.

Таким образом, чтобы решить вашу проблему, теоретически вам необходимо добавитьследующее к вашему CSS-коду для #one: transform-style:preserve-3d;

К сожалению, «теоретически», похоже, название игры здесь, потому что кажется, что эта функция еще не поддерживается Firefox.По-видимому, он поддерживается Safari (см. Эту страницу с подробностями: http://www.webkit.org/blog/386/3d-transforms/),, но мои быстрые попытки заставить его работать на скрипке пока не увенчались успехом даже в Safari.

[EDIT]

Я могу подтвердить, что текущая версия Firefox (v7) не поддерживает transform-style или -moz-transform-style, а также текущие версии Beta или Aurora .

Информацию сложно найти, но этот отчет об ошибке на Mozilla.org подразумевает, что они работают над ней для Firefox версии 10.

Учитывая текущий цикл выпускаэто не так далеко, как кажется, но, тем не менее, до того, как вы сможете использовать эту функцию в Firefox, еще есть время. Тем временем, единственное работающее решение, которое я могу вам дать, - это разделить элементывместо того, чтобы вложить их, и вращать их независимо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...