css - css3d形状は回転時に歪むようになります

Question

cssに3Dボックスがあり、回転すると奇妙に見えます。jsfiddleは次のとおりです。http：//jsfiddle.net/markasoftware/GKPZ9/回転 すると、ボックスのように見えない奇妙な外観を見ることができます。なぜこれが起こるのですか？

Answer 1

私があなたの質問を正しく理解し、それがボックスを回転させたときに長方形ではなく台形に見える側面についてである場合、...

perspective回転させた箱に使ったからです。perspective親（この場合は本体）で使用すると、問題が解決するはずです。perspective-originこの場合、を設定することもできます。

修正されたフィドル

また、常に接頭辞のないバージョンを最後に置く必要があることに注意してください。

また、別の注意：のデフォルト値backface-visibilityはvisibleであるため、省略できます。

Answer 2

出力をテストするためにどのブラウザを使用していますか？

あなたのコードはwebkitブラウザでは機能しているように感じますが、Firefoxなどでは機能していません。

Webkitブラウザでのみサポートされているperspective、transform-styleなどのcssプロパティを使用しました。また、webkitタイプ以外のブラウザでサポートされているtransform、backface-visibilityなどのcssプロパティをいくつか使用しましたが、プロパティを指定していません。他のブラウザが理解できる方法。たとえば、指定したばかり

transform: rotateX(-20deg);
-webkit-transform: rotateX(-20deg);

指定すべき場所

 -moz-transform: rotateX(-20deg); 
  -ms-transform: rotateX(-20deg); 
   -o-transform: rotateX(-20deg); 
      transform: rotateX(-20deg);
         -webkit-transform: rotateX(-20deg);