html - 为什么属性 "perspective"对我不起作用？

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);
}

这行不通，它总是显示一个红色方 block ...我不明白为什么。我使用 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);
                    }