为什么透视不起作用？

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/