html - 为什么透视不起作用？

我正在尝试制作一个非常基本的 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 工作(因为盒子高度缩小)但没有透视。透视属性不起作用。我不明白，我做错了什么？

最佳答案

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

Demo

Here's 一篇不错的文章，可以帮助您前进..

关于html - 为什么透视不起作用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20582741/