爲什麼透視不起作用？

Question

我正在試圖製作一個非常基本的3D廣場。

div { 
width: 300px; 
height: 300px; 
background: #333; 
transform: rotateX(50deg); 
-webkit-transform: rotateX(50deg); 
-moz-transform: rotateX(50deg); 
-ms-transform: rotateX(50deg); 
Perspective: 300px; 
-webkit-Perspective: 300px; 
-moz-Perspective: 300px; 
-ms-Perspective: 300px; 
} 

在Chrome上進行測試，RotateX工作（如框中高度縮小），但沒有透視。透視屬性不起作用。我不明白，我做錯了什麼？

Answer 1

當你定義perspective，即perspective視圖設置的子元素，而不是爲自己如此嘗試中嵌套另一個你的元素的元素。

Demo

Here's一個很好的文章，讓你去..

Answer 2

您需要將perspective屬性應用到您應用transform屬性的元素的祖先。

http://jsfiddle.net/rPwRD/