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