肯定的な引数を指定してperspective（）関数を適用すると要素が消えます

Question

私はCSSの第8章：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持つdiv要素が私のChromeブラウザに表示されなくなります。 パースペクティブ関数の引数値を調整して0に設定した後、ページにinnerというテキストが回転効果で表示されます。

あなたはその理由を知っていますか？私はサファリでこのページを試しましたが、まだ問題はあります。

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>