为什么透视不起作用？

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效果可以实现（即盒子高度缩小），但是没有透视效果。透视属性不起作用。我不明白，我做错了什么？

- Magdi Gamal

Answer 1

当您定义perspective时，该perspective视图设置为子元素而不是元素本身，因此请尝试将您的元素嵌套在另一个元素内。

演示

这里有一篇不错的文章可以帮助您入门..

- Mr. Alien

Answer 2

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

http://jsfiddle.net/rPwRD/

- Quentin