CSS3マトリックス

前の記事では、トランスフォーム変形アトリビュートを紹介しましたが、実際、一連の変形関数の本質は行列演算です。この記事では、その演算によってさまざまな変形効果がどのように生成されるかを見ていきます。

まず、より簡単な 2D 行列行列を見てみましょう。 6 つのパラメータ行列 (a、b、c、d、e、f) があります。行列内の各パラメータの位置は次のとおりです。

移動変位を例として取り上げます。 XY 軸上の原点位置を基準にして移動したい場合は、translate(tx, ty); するのが非常に簡単です。これを実現するために行列を使用することもできます。原点座標は xy であり、移動変位後の新しい座標は x1=x+tx、y1=y+ty である必要があります。上図によれば、matrix(1,0,0,1,tx,ty);と等価です。たとえば、translate(50px, 100px); は、matrix(1,0,0,1,50,100);

と同等です。同様に、スケール スケーリング後の新しい座標は、x1=x*sx, y1 である必要があります。 =y*sy なので、matrix(sx,0,0,sy,0,0); と同等です。たとえば、scale(0.5, 1.5); は、matrix(0.5,0,0,1.5,0,0);

と同等ですが、回転は要素をある角度で回転させます。は少し複雑です。回転後の各ピクセルの新しい座標は、x1=cos(a)*x-sin(a)*y、y1=sin(a)*x+cos(a)*y である必要があるため、matrix( cos(a) ),sin(a),-sin(a),cos(a),0,0);。たとえば、rotate(45deg); は、matrix(0.53,0.85,-0.85,0.53,0,0); (cos(45)=0.53, sin(45)=0.85)

と同等です。歪み、それぞれ ピクセルの新しい座標は、x1=x+tan(ax)*y、y1=tan(ay)*x+y である必要があるため、これらは、matrix(1,tan(ay),tan( ax),1,0,0 );。たとえば、skew(45deg); は、matrix(1, 0, 1, 1, 0, 0) (tan(45)=1)

というテーブルを作成しました。 >

scale3d(sx,sy,sz) は、matrix3d(sx,0,0,0, 0,sy ,0,0,0,0,sz,0,0,0,0,1)

rotate3d(x,y,z, a) は実際には高校数学の本を取り出して注意深く復習する必要があります。 4 番目のパラメータ alpha は sc と sq で使用されます

... パラメータを上から下、左から右に Matrix3d に移動するのと同じです。もちろん、ライブラリ関数で必要な場合を除き、rotate3d をそのままにして、matrix3d を使用してrotate3d をシミュレートすることに挑戦する人がいるかどうかは非常に疑問です。

既製の変換組み込み関数を使用する代わりに、誰が行列/matrix3d を使用するだろうかと疑問に思っているかもしれません。意図的に他の人にコードを理解させたくない場合は、transform:rotate(15deg)translate(230)scale(1.5,2.6)skew(220deg,-150deg)translate(230px); のように記述できます。 ,1.84, 0.54, 2.8, 466px, 482px); 誰もあなたのコードを理解できず、誰もそれを変更できないことを保証し、会社があなたを解雇しても誰もあなたを解雇しません。しかし、私の知識不足を許してください。私の個人的な好奇心を満たすことと、ちょっとした知的優越感を味わうこと以外には、実際のプロジェクトではあまり役に立たないようです...この記事は、ただ楽しむために読んでください。