爲什麼「-webkit-transform-style：preserve-3d;」讓一些div消失？

以下代碼應顯示標題欄，頁腳欄和圖像，但出於某種原因，只要我添加了.div1 { -webkit-transform-style: preserve-3d; }，我只能看到標題欄。我知道它似乎應用了一些不必要的div和風格，但我確實需要它們才能使我調出的效果更容易調試。我的頁面代碼是：爲什麼「-webkit-transform-style：preserve-3d;」讓一些div消失？

<html> 
    <head> 
     <title></title> 
     <style> 
      body { 
       margin: 0px; 
      } 
      .div1 { 
       -webkit-transform-style: preserve-3d; 
      } 
      .div2 { 
       position: absolute; 
       width: 100%; 
       height: 100%; 
      } 
      img { 
       max-width: 50%; 
       max-height: 50%; 
       display: block; 
      }    
      .footer { 
       position: fixed; 
       bottom : 0px; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="div1"> 
      <div class="div2"> 
       <div class="header"> 
        Header 
       </div> 
       <div class="imgdiv"> 
        <img src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2012/5/18/1337331092888/Cwm-Idwal-Snowdonia.-Mich-007.jpg"> 
       </div> 
       <div class="footer"> 
        Footer 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

來源

2012-05-25 Grezzo

我覺得這裏的問題是類似的著名行爲，其中position: absolute/fixed的div沒有定義的高度/寬度往往可以消失。在你的情況下，3D畫布正在尋找<div class="div1">以在其上定義寬度，否則它會漫無目的地漂浮在空間中，因爲您給它的屬性使用了3D畫布，我相信以某種間接方式導致它不會展開以包含子div。

在任何情況下，你可以看到，在元件上定義height和width與preserve-3d修復了JS提琴問題：http://jsfiddle.net/nY9v6/

來源

2012-05-31 23:53:00 Brian

如何混亂。 Thankyou – Grezzo

當然可以！記住這些事情的規範還沒有最終確定是很重要的。即使是CSS3動畫（比3D畫布更成熟的規格）也被發現有bug（因爲規範，不是因爲瀏覽器的實現），並且規範很快就會改變。 – Brian

這很有趣，你知道討論規範中的錯誤的任何文章嗎？ – Grezzo

-3

好的樣品

http://unformedbuilding.com/demo/2012/css-transforms/3d/3d-transform-style.html

來源

2012-08-03 12:24:11

爲什麼「-webkit-transform-style：preserve-3d;」讓一些div消失？

回答

相關問題