私はあなたが遊ぶことができるフィドルをここに持っています。回転 X および回転 Y スライダーを動かして確認します。要素の最も近くにある部分は小さく、遠くにある部分は大きくなります。を使ってひっくり返すと
transform:rotateZ(180deg);
正しく見えますが、そもそもなぜ正しく見えないのかわかりません。
アップデート
この 3D 立方体を見れば納得です。立方体の変換原点は立方体の中央です。
私はあなたが遊ぶことができるフィドルをここに持っています。回転 X および回転 Y スライダーを動かして確認します。要素の最も近くにある部分は小さく、遠くにある部分は大きくなります。を使ってひっくり返すと
transform:rotateZ(180deg);
正しく見えますが、そもそもなぜ正しく見えないのかわかりません。
アップデート
この 3D 立方体を見れば納得です。立方体の変換原点は立方体の中央です。
メソッドが想定どおりに機能すると私が知る限り、それらは等角投影 3D で回転されているだけで、遠近法はありません。これにより、最も近いエッジとより遠いエッジが同じサイズになります。実際の 3D とは異なり、遠いエッジが小さく見え、近いエッジが大きく見えます。
等角投影法の詳細については、ウィキペディアの記事を参照してください。
回転のパースペクティブを取得したい場合はperspective
、含まれている要素の CSS にプロパティを追加する必要があります。最初のフィドルに追加-webkit-perspective: 1000px;
し<body>
て Chrome で結果を表示すると、おそらく望んでいたような遠近法 3D が得られます。
このプロパティの詳細については、CSS3 変換仕様を参照してください。