答えが見つからない「単純な」質問 --webkit-perspective
実際に数学的には何をしますか? (私はそれが持っている効果を知っています、それは基本的に焦点距離コントロールのように機能します)例えばどういう-webkit-perspective: 500
意味ですか?!?
とりわけ、移動したものの画面上の場所を見つける必要があります。-webkit-perspective
答えが見つからない「単純な」質問 --webkit-perspective
実際に数学的には何をしますか? (私はそれが持っている効果を知っています、それは基本的に焦点距離コントロールのように機能します)例えばどういう-webkit-perspective: 500
意味ですか?!?
とりわけ、移動したものの画面上の場所を見つける必要があります。-webkit-perspective
CSS 3D Transforms Moduleワーキング ドラフトでは、次の説明が提供されています。
パースペクティブ(<数字>)
透視投影行列を指定します。このマトリックスは、底辺が視聴者から無限に離れており、頂点が視聴者の位置を表すピラミッドにビューキューブをマッピングします。表示可能領域は、ビューポート (閲覧者の位置と閲覧者から無限遠にある点との間の Web ページのレンダリングに使用されるブラウザー ウィンドウの部分) の 4 つの端によって囲まれた領域です。関数のパラメーターとして与えられる深さは、ビューアーから z=0 平面までの距離を表します。値が低いほどピラミッドが平らになり、遠近効果がより顕著になります。値はピクセル単位で指定されるため、値 1000 では適度な量の短縮が行われ、値 200 では極端な量が短縮されます。行列は、単位行列から開始し、行 3、列 4 の値を値 -1/深さに置き換えることによって計算されます。depth の値は 0 より大きい必要があります。そうでない場合、関数は無効になります。
完全に明確ではないにしても、これは何かの始まりです。最初の文から、ウィキペディアの透視投影行列の記事が役立つかもしれないと思いますが、この投稿のコメントでは、CSS ワーキング グループの規則とウィキペディアで見られる規則との間に若干の違いがある可能性があることが明らかにされています。頭痛の種を避けるためにそれらをチェックしてください。
http://en.wikipedia.org/wiki/Perspective_projection#Diagramをご覧ください
以前のコメントを読み、いくつかの調査とテストを行った後、これが正しいと確信しています。
これは Y 座標でも同じであることに注意してください。
変換された X = 元の X * (パースペクティブ / (パースペクティブ - Z 移動) )
例えば。Div は 500px 幅 Perspective は 10000px Transform は Z 方向に -5000px
変換後の幅 = 500 * ( 10000 / ( 10000 - ( -5000 ) ) 変換後の幅 = 500 * ( 10000 / 15000) = 500 * (2/3) = 333px
@Domenic奇妙なことに、「行列は、単位行列から始めて、行3、列4の値を値-1 /深さに置き換えることによって計算されます。」は、 CSS 3D Transforms モジュールのワーキング ドラフトから既に削除されています。おそらく、この説明にはいくつかの不正確さがあるかもしれません。
さて、遠近法の数字(<number>)が何を意味するのかという質問ですが、想像上のカメラの位置とパソコンの画面との距離と考えてよいのではないでしょうか。