"позиция: абсолют" у ребенка не работает, если тело имеет перспективу

Я столкнулся с проблемой при создании простого CSS-перехода.

У меня есть мой body элемент, который его единственный ребенок является div с позиции абсолютной.

Внутри div Я вставил прямоугольник с простым трехмерным переходом в псевдоклассе при наведении: transform: rotateX(90deg)и я хочу установить perspective стиль в родительском элементе, чтобы он выглядел лучше.

Когда я установил perspective в теле переход работает должным образом: он создает эффект перспективы и выглядит хорошо. Но - и проблема здесь - ребенок теряет абсолютную позицию (по крайней мере, в Chrome).

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

Когда perspective установлен div также теряет свой синий фон, но я думаю, что это происходит, потому что его высота становится 0.

Это ошибка? Как я могу это исправить?

Спасибо

Источник

0 ответов

Наткнулся на эту точно такую ​​же проблему, очень странное поведение. Похоже, добавление перспективы к телу вводит странные причуды, мой подход состоял в том, чтобы создать виртуальный контейнер "тело" внутри, чтобы действовать, как будто это было тело.

Вместо чего-то вроде

<html>
  <body style="perspective: 1000px">
    <div style="transform:rotate(10deg); position:absolute"></div>
  </body>
</html>

пытаться

<html>
  <body>
    <container style="perspective: 1000px">
      <div style="transform:rotate(10deg); position:absolute"></div>
    </container>
  </body>
</html>
Источник
Другие вопросы по тегам