CSS3 フロントエンド開発に必要な変換マトリックス_html/css_WEB-ITnose

私は長い間行列変換についてのブログ記事を書こうと考えていましたが、今日は Winter が書いたブログ「CSS3: The math principles BehindTransform and Transition」を見て、この記事を書くきっかけになりました。次のデモ コンテンツには最新のブラウザのサポートが必要であることに注意してください。 Chrome/Firefox/Opera など。デモはリーダーでは見ることができません。

行列とは、線形代数の内容であり、コンピューターグラフィックスにおける行列の変換に使用されます。以前は、フロントエンドの作業に行列変換が使用されることはほとんどありませんでした。しかし、ブラウザの進歩やHTML5やCSS3の普及により、フロントエンドで操作できるものが増えてきたため、行列変換も視野に入るようになりました。

行列変換というと非常に高度なことのように聞こえますが、実際には、より豪華で洗練された外観を与えるためにパッケージ化された一連の単純な数学演算にすぎません。これまで行列演算を経験したことがない場合でも、パニックにならずに、以下の行列の式をスキップして、各項目の後ろにある太字の式だけを見てください。これらの公式には高校レベルの足し算、引き算、三角関数のみが含まれます。冒頭では行列を外しますが、その後の議論では行列の公式を避けて直接問題を分かりやすく説明します。

ブラウザでサポートされている最も古い行列変換は SVG 標準に含まれている可能性があります。その後、点線グラフィックを備えた CSS 3 や HTML5 の Canvas にもマトリックス変換が登場しました。もちろん、強力な Flash や Flex にも変換マトリックスがありました。それらの基本原則は同じです。現在、2D マトリックス変換は多くのブラウザでサポートされていますが、3D 変換には時間がかかります。

私は長い間行列変換について話してきました。実際、要素をレンダリングした後、ビットマップを取得し、このビットマップ上の各点を変換して新しいビットマップを取得し、変換、スケーリングを生成します。 、回転、シアー、ミラー反射エフェクトが利用できるようになりました。

基本式

現在、SVG、CSS 3、Canvasのいずれであっても、2D行列変換ではa b c d e fの6つのパラメータが提供されます。 基本的な式は次のとおりです。

このうち、xとyは初期座標です。要素、x' と y' は行列変換後に得られる新しい座標です。
中央の 3×3 変換行列を使用して、元の座標を変換して新しい座標を取得します。

注意!パラメータ a b c d e f が縦に並んでいます。インターネット上には間違った方向に並んでいる記事がたくさんあります。

行列乗算の演算規則によれば、上記の行列式は次の2つの式に変形できます

x'=ax+cy+e
y'=bx+dy+f

ということと言われましたが、上記の大きなことは見ないでください。本質的には上の 2 つの単純な式にすぎません。以降の説明では、上の 2 行に焦点を当て、マトリックスの内容には触れません。

翻訳

元の位置

120px、50pxの翻訳後

呼び出し時にパラメータmatrix(1,0,0,1,tx,ty)が指定された場合、つまりa=d=1の場合、 b=c=0 の場合、上記の式は

x' = 1x+0y+tx = x+tx
y' = 0x+1y+ty = y+ty

に簡略化されます。ほら、これです。 元の x と y に基づいて変換が実行され、ちょうど x+tx、y+ty 点になります。とてもシンプルです。数学的に言えば、tx と ty は Δx と Δy に似ています。

x' = x+Δx
y' = y+Δy

CSS 3 のtransform:translate(tx, ty); は、transform:matrix(1,0,0,1, tx,)と同等です。 ty); 行列を使用する場合は単位は必要ありません。デフォルトは px ですが、translate には単位が必要であり、px や em などの単位が使用できることに注意してください。

拡大縮小と伸縮

元のサイズ

長さと幅を1.5倍に拡大します

呼び出し時にパラメータ行列(Sx,0,0,Sy,0,0)を指定した場合、つまり、または、a=Sx、d=Sy、b=c=e=f=0 など、d が 1 に等しくない場合、式は

x' = Sx*x+0y+0 = Sx*x のように簡略化されます。
y' = 0x+Sy*y +0 = Sy*y

この操作により、実際には x 座標が Sx 倍、y 座標が Sy 倍に拡大されることが想像できます。
これは主に要素をズームするために使用されます。 Sx と Sy が 1 より大きい場合は拡大され、Sx と Sy が 1 より小さい場合は縮小され、1 に等しい場合はそのままになります。さらに、x 方向と y 方向は互いに独立しているため、一方向にズームインし、もう一方の方向にズームアウトすることができます。
上記の例では、m と n を両方とも 0.5 に設定したため、グラフィックの長さと幅はそれぞれ半分に縮小されました。さらに、スケーリングの基点として左上隅ではなく、要素の中心を使用していることも注目に値します。 CSS 3のtransform:scale(Sx,Sy);はtransform:matrix(Sx,0,0,Sy,0,0);と同等です

rotation

37°回転

ここで使用される関数は比較的高度で、三角関数の知識が必要です

呼び出し時にパラメータ行列(cosθ,sinθ,-sinθ,cosθ,0,0)が指定されている場合

x' = x*cosθ-y*sinθ+0 = x*cosθ-y*sinθ
y' = x*sinθ+y*cosθ+0 = x*sinθ+y*cosθ

ありがとうコンピュータ グラフィックスでは、通常、右方向が x 軸の正の方向、下方向が y 軸の正の方向であるため、ここでの θ は、座標の原点を中心とした要素の時計回りの回転角度を表します。 。ここでの原点は要素の左上隅ではなく、要素の中心点です。
上記の例では、div を時計回りに 37°回転させました (cos37°=0.8、sin37°=0.6)。そのため、提供される行列のパラメーターは、matrix(0.8,0.6,-0.6,0.8,0,0) になります
CSS では3、transform:rotate(37deg) は上記の変換と同等です。 CSS 3 の角度の単位は deg である必要があることに注意してください。利点は、sin 値と cos 値を自分で計算する必要がないことです。

Shear

x 方向に 45°傾けます

シアーとは、要素を特定の方向に特定の角度で傾けることです。渡されるパラメータは、matrix(1,tan(θy),tan(θx),1,0,0)

x' = x+y*tan(θx)+0 = x+y*tan(θx) である必要があります。 )
y' = x*tan(θy)+y+0 = x*tan(θy)+y

ここでのthetaxとθyはxの正の方向とyの正の方向への傾斜角を表しますはそれぞれ互いに独立しています。上の例では、要素を x 方向に 45 度傾けたので、その Tan(θx)=1
CSS 3 の Transform: skew(θx, θy) は、transform: math(tan(θx ),0) と同等になります。 ,0,tan(θy),0,0); スキューを使用する場合は、角度を直接使用できますが、単位は deg である必要があります。たとえば、上記の例は行列で次のように記述されます。 ,0,1 ,1,0,0); 変換と同等: skew(45deg, 0);

鏡面対称

鏡面対称

鏡面反射とは、要素が鏡面対称であることを意味します。ある直線。最も基本的なケースは、原点を通過する直線を反射できることです。 (ux, uy) を直線方向の単位ベクトルとして定義します。つまり、直線方程式が y=kx の場合、ux=1/sqrt(1+k^2)、uy=k/sqrt(1+k^2) になります

そして、鏡の反射が変化すると、パラメータは matrix(2*ux^2-1,2*ux*uy,2*ux*uy,2*uy^2-1,0,0) である必要があります

したがって、最終的な方程式


x' = ( 2*ux^2-1)*x+2*ux*uy*y

y' = 2*ux*uy*x+(2*uy^2-1)*y
上記では例えば、直線y=2xの鏡面対称です。現在、CSS 3 にはこれに対応する簡略化されたルールはありません。

原点に達していない線を対称にする方法としては、原点の座標を設定する必要があります。デフォルトでは、原点の座標はこの要素の中心であるため、原点の座標を変更すると、CSS 3 で以前のすべての効果の表示を変更することもできます。座標の原点を変更するには、transform-origin メソッドを使用します。

最後に、より高いレベルでプレイしたい場合は、コンピューター グラフィックスに関する本を購入するのは避けられません。この記事はほんの表面に過ぎません。それが役に立てば幸い。