3D中的3D透視

我遇到了CSS 3D透視屬性的問題。3D中的3D透視

<figure> 
    <img src="http://www.saintbioz.fr/wp-content/uploads/2010/02/paysage-montagneux.jpg" width="512" height="384" alt="Landscape" /> 
    <figcaption>Summer in the mountains</figcaption> 
</figure>

只想動畫在figcaption：懸停從-90deg到0deg執行向下摺疊效果（像http://davidwalsh.name/demo/folding-animation.php），考慮到-90deg表示塊壓平（因此不可見）

/** vendor prefixes have been removed for better readability **/ 
figure { 
    display: inline-block; 
    position: relative; 
    line-height: 0; 
    perspective: 300px; 
} 
figcaption { 
    background-color: rgba(0,0,0,0.2); 
    padding: 20px 10px; 
    position: absolute; 
    top: 0; 
    right: 0; 
    left: 0; 

    transition-property: all; 
    transition-duration: 500ms; 
    transform: rotateX(-123deg); 
    transform-origin: top; 
} 
figure img:hover + figcaption { 
    transform: rotateX(0deg); 
}

問題是，透視圖沒有給Chrome和Firefox提供相同的渲染。我必須手動將figcaption默認轉換設置爲rotateX(-123deg);，具體取決於500px的透視值，它在Chrome上運行良好，但在Firefox上無效。

理論上，當不是時：-hdeg應該是-90deg：hover和0deg在：hover時，但似乎perspective屬性改變了深度字段的長度，所以-90deg不再有效。

我想知道爲什麼在使用perspective和rotate時最佳做法是什麼，以使其在所有最新的瀏覽器上都能正常工作？

此致敬禮。

PS：只要複製/粘貼HTML & CSS和嘗試在Chrome和FF，你應該立即看到什麼是錯;）

來源

2012-07-30 jmpp

我知道這不會是有益的，但personnaly我試着一些透視的實驗和每個瀏覽器都以不同的方式呈現視角。有些瀏覽器不支持這個觀點。所以，你的應用程序不會被所有人使用，也許你應該使用另一種技術，直到所有主要瀏覽器完全符合這個觀點。

來源

2012-07-31 04:04:47 JBENOIT

您好，感謝回答。我的目標是在瀏覽器上按預期工作，而不管其他瀏覽器如何處理。 – jmpp 2012-07-31 09:54:49

提醒：現在是2016年.... – 2016-07-20 17:32:34

也許這個答案很有用，太晚了。

無論如何，使元素隱形的最佳方式是將角度保持在90度，但將透視原點設置在其上方。（無需計算確切的角度，將獲得預期的效果）

figure { 
 
    display: inline-block; 
 
    position: relative; 
 
    line-height: 0; 
 
    perspective: 300px; 
 
    perspective-origin: top center; /* added this setting */ 
 
} 
 
figcaption { 
 
    background-color: rgba(0,0,0,0.2); 
 
    padding: 20px 10px; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    left: 0; 
 

 
    transition-property: all; 
 
    transition-duration: 2s; 
 
    transform: rotateX(-90deg); 
 
    transform-origin: top; 
 
} 
 
figure img:hover + figcaption { 
 
    transform: rotateX(0deg); 
 
}

<figure> 
 
    <img src="http://www.saintbioz.fr/wp-content/uploads/2010/02/paysage-montagneux.jpg" width="512" height="384" alt="Landscape" /> 
 
    <figcaption>Summer in the mountains</figcaption> 
 
</figure>

來源

2015-06-25 21:49:31 vals

回答

相關問題