html - 为什么属性“透视”对我不起作用？

Question

HTML：

<div></div>

CSS：

div {
    width: 50px;
    height: 50px;
    background: red;
    border: 10px solid yellow;
    -webkit-perspective: 600px;
    -webkit-transform: perspective(600);
    -moz-transform: perspective(600);
    transform: perspective(600);
}

这不起作用，它总是显示一个红色方块......我不明白为什么。我使用 Chrome 23

Answer 1

透视图需要与另一个变换相结合才能发挥作用。看一下：

http://jsfiddle.net/TD8Hr/

html:

<div>
  <div></div>
</div>

CSS：

div { padding: 50px; }

div > div {
                width: 50px; 
               height: 50px; 
           background: red;
               border: 10px solid yellow;
  -webkit-perspective: 600px;
    -webkit-transform: perspective(600) rotateY(120deg);
       -moz-transform: perspective(600) rotateY(120deg);
            transform: perspective(600) rotateY(120deg);
                    }