Блог

Главная - Вопросы по программированию - Iframe игнорирует порядок Z с помощью 3D-преобразования CSS

Iframe игнорирует порядок Z с помощью 3D-преобразования CSS

#html #css #3d

Вопрос:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">
        <div id="center">
            <div class="transform1">
                <div style="display: inline-block; background-color: red; width: 400px; height: 200px; transform: translate3d(-200px, -100px, 0)"></div>
            </div>
            <div class="transform2">
                <div style="display: inline-block; background-color: green; width: 400px; height: 200px; transform: translate3d(-400px, -100px, 0)"></div>
            </div>
            <div class="transform2">
                <iframe style="transform: translate3d(0, -100px, 0)" width="400" height="200" src="https://www.youtube.com/embed/aMDFhjpMTEY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
        </div>
    </div>
    <style>
        #root {
            position: relative;
            perspective: 400px;
            height: 800px;
            overflow: hidden;
        }
        #center {
            transform-style: preserve-3d;
            transform: translate3d(50%, 50%, 0);
            height: 100%;
        }
        #center > * {
            position: absolute;
        }
        .transform1 {
            transform-style: preserve-3d;
            transform: translate3d(0, 0, 200px);
        }
        .transform2 {
            transform-style: preserve-3d;
            transform: translate3d(0, 0, 100px);
        }
    </style>
</body>
</html>

Я думаю, div и iframe в transform2 должны работать одинаково. Вот так.

Я думаю, так и должно быть..

Но я мог видеть результат следующим образом:

введите описание изображения здесь

Iframe игнорирует порядок Z с помощью 3D-преобразований CSS. Даже между фреймами. Почему они игнорируют порядок Z? Как я могу это исправить?

Ответ №1:

Я не знаю, почему так происходит, но если вы поместите красный div в конец, он будет работать нормально:

 #root {
  position: relative;
  perspective: 400px;
  height: 800px;
  overflow: hidden;
}

#center {
  transform-style: preserve-3d;
  transform: translate3d(50%, 50%, 0);
  height: 100%;
}

#center>* {
  position: absolute;
}

.transform1 {
  transform-style: preserve-3d;
  transform: translate3d(0, 0, 200px);
}

.transform2 {
  transform-style: preserve-3d;
  transform: translate3d(0, 0, 100px);
} 
 <div id="root">
  <div id="center">
    <div class="transform2">
      <div style="display: inline-block; background-color: green; width: 400px; height: 200px; transform: translate3d(-400px, -100px, 0)"></div>
    </div>
    <div class="transform2">
      <iframe style="transform: translate3d(0, -100px, 0)" width="400" height="200" src="https://www.youtube.com/embed/aMDFhjpMTEY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen></iframe>
    </div>
    <div class="transform1">
      <div style="display: inline-block; background-color: red; width: 400px; height: 200px; transform: translate3d(-200px, -100px, 0)"></div>
    </div>
  </div>
</div>

Ответ №2:

На самом деле, вы не работаете с z-порядком в своем коде.

translate3d предназначен для математических переводов, поэтому параметр ‘tz’ создает эффект масштабирования, а не z-порядок между различными элементами, как вы, кажется, ожидали.

Кроме того, добавление красного div изменило порядок html-кода, и поэтому красный div находится выше остальных.

Ответ №3:

Это проблема браузера, вызванная в Chrome.

Проблема с хромом: https://bugs.chromium.org/p/chromium/issues/detail?id=1264783

Метки: