为什么透视不起作用？

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时，{child} perspective视图是为子元素设置的，而不是为元素本身设置的，因此请尝试将元素嵌套在另一个元素中。

Demo

Here's一篇很棒的文章让你上路..

Answer 2

您需要将perspective属性应用于您应用transform属性的元素的祖先。

http://jsfiddle.net/rPwRD/