7

私はあなたが遊ぶことができるフィドルをここに持っています。回転 X および回転 Y スライダーを動かして確認します。要素の最も近くにある部分は小さく、遠くにある部分は大きくなります。を使ってひっくり返すと

transform:rotateZ(180deg);

正しく見えますが、そもそもなぜ正しく見えないのかわかりません。

ここに画像の説明を入力

アップデート

この 3D 立方体を見れば納得です。立方体の変換原点は立方体の中央です。

4

1 に答える 1

3

等尺性

メソッドが想定どおりに機能すると私が知る限り、それらは等角投影 3D で回転されているだけで、遠近法はありません。これにより、最も近いエッジとより遠いエッジが同じサイズになります。実際の 3D とは異なり、遠いエッジが小さく見え、近いエッジが大きく見えます。

等角投影法の詳細については、ウィキペディアの記事を参照してください。

視点

回転のパースペクティブを取得したい場合はperspective、含まれている要素の CSS にプロパティを追加する必要があります。最初のフィドルに追加-webkit-perspective: 1000px;<body>て Chrome で結果を表示すると、おそらく望んでいたような遠近法 3D が得られます。

このプロパティの詳細については、CSS3 変換仕様を参照してください。

于 2013-03-11T13:33:06.613 に答える