私はWebKitCSSMatrixが実際に

Question

Appleのofficial documentationが言うどのように動作するかを知りたい：3Dトランスフォームまたは2Dのためのベクターは、変換のために

WebKitCSSMatrixオブジェクトは4x4の均質な行列を表します。これらのオブジェクトを使用して、JavaScriptで行列を操作することができます。たとえば、行列の乗算、変換、スケールを行うことができます。

私はエンジニアではなく、栄誉あるデザイナーです。私はその理由を理解できないと思っています。どうか、誰かがこの行列やベクトルがどのように働くかを理解するために正しい方向に向けることができますか？

Answer 1

ActionScriptの場合でも、Understanding the Transformation Matrix in Flash 8をチェックしてください。それはあまりにも美しい写真を持っています:)

どのように変換行列（行列は行列の複数形です）の作業に入る前に、行列が何であるかを理解することが重要です。行列は、任意の数の行と列で構成された長方形の配列（または表）です。 m行n列の行列は、m×n行列と呼ばれます。これは、行列の次元を表します。あなたは一般的に行と列の数字が2つの大括弧記号で囲まれた行列を見ます。

...

アフィン変換は、変換された座標空間に共線及び相対遠ざけるを保持する変換です。これは、アフィン変換がそのラインが存在する座標空間に適用された後、ライン上のポイントがライン内に残ることを意味します。また、平行線が平行のままであり、相対的な間隔または距離が、縮尺は変わりませんが、常に一定の比率で維持されることを意味します。アフィン変換は、再配置、スケーリング、スキュー、回転を可能にします。彼らがすることができないことには、遠近法で先細りや歪みがあります。 Flashでシンボルを変換する作業をしている場合は、おそらくこれらの性質を認識しているはずです。

http://www.senocular.com/flash/tutorials/transformmatrix/images/t_affine.jpg

Answer 2

やれやれ、これは私が答えることを試みた中で最も難しい質問です。簡単な答えは、Webデザイナーのように、我々は3次元変換を表現する語彙がないということです。分かりやすい方法であなたに説明するために、私は自分自身を理解していない数学の概念を使用する必要があります。

あなたはさらに、あなたが見てとることができ調査したい場合： http://www.eleqtriq.com/2010/05/css-3d-matrix-transformations/

しかし、私は視覚的にそれを説明することができます。 http://duopixel.com/stack/webkitmatrix/（これはSafari 5 w/Snow Leopard、またはiPad、またはコースでご覧ください）。

あなたが見ていることは、何もしないように見えるスライダーは私たちが3Dキャンバスに複数のオブジェクトを持っていた場合には目に見えるだろう疑うz軸に関連している16の値のwebkitCSSMatrixにだけインタフェースです。

編集：私が前に置いたリンクを勉強した後、私は元の作者が前に同じ例を行ったことに気付きました。 http://www.eleqtriq.com/wp-content/static/demos/2010/css3d/matrix3dexplorer.html