Элемент исчезает после применения функции перспективы() с положительным аргументом

Question

Я читаю 8-ю главу CSS: The Definitive Guide, 4th Edition. Существует такой фрагмент в книге:

div#inner { 
 
    transform: perspective(750px) translateZ(60px) rotateX(45deg); 
 
}

<div id="outer"> 
 
    outer 
 
    <div id="inner">inner</div> 
 
</div>

ДИВ с #inner исчезает из моего хромированного браузера. После настройки значения аргумента функции перспективы и установки его на 0, я могу увидеть текст на странице с некоторым эффектом поворота.

Знаете ли вы, почему? Я пробовал эту страницу в сафари, проблема еще.

Answer 1

Перспективный происхождения находится в центре элемента по умолчанию.

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

Посмотрите, как он меняется, когда ширина элемента ниже:

div#inner { 
 
    background-color: lightblue; 
 
    transform: perspective(750px) translateZ(60px) rotateX(45deg); 
 
}

<div id="outer"> 
 
    outer 
 
    <div id="inner">inner</div> 
 
</div>

div#inner { 
 
    width: 70px; 
 
    background-color: lightgreen; 
 
    transform: perspective(750px) translateZ(60px) rotateX(45deg); 
 
}

<div id="outer"> 
 
    outer 
 
    <div id="inner">inner</div> 
 
</div>

Answer 2

Попробуйте

div#inner { 
 
      transform: rotate(30deg) translate(20px) perspective(30px); 
 
\t \t \t width: 100px; 
 
     }

<div id="outer"> 
 
     outer 
 
     <div id="inner">inner</div> 
 
    </div>