css3での変形とアニメーション(1)_html/css_WEB-ITnose

CSS3 アニメーションのいくつかのプロパティ: 変換、トランジション、アニメーション。

最初にトランスフォーム変形を紹介します。

transform 英語の意味: 変化、変形。

css3 の変換には、回転、傾斜、拡大縮小、移動、および行列変換行列の種類が含まれます。

構文:

transform ： none | <transform-function> [ <transform-function> ]* transform: rotate | scale | skew | translate |matrix;

none がデフォルト値であり、変換は実行されません。

51a72c16a181454beb1335050c004065: スペースで区切られた 1 つ以上の変換関数を示します 。回転、拡大縮小、平行移動を同時に使用するなど、要素に対して複数の変形属性操作を同時に実行できます。

rotate(<rotate-angle> [<cx> <cy>])skewX(<skew-angle>)skewY(<skew-angle>)scale(<sx> [<sy>])translate(<tx> [<ty>])matrix(<a> <b> <c> <d> <e> <f>)

1. 回転 回転

rotate(0c0cb308ee3d2ee3281772bfc9b806c2): 指定された angle パラメーターを通じて要素の 2D 回転 (2D 回転) を指定します。 まず transform-origin 属性を定義する必要があります。

transform-origin は回転の基点を定義します。ここで、 angle は選択角度、正の時計回りの回転、負の反時計回りの回転を指します。

2. translation translation

translate() 関数は、position:relative と同様に、x 軸と y 軸上の Web コンポーネントに影響を与えることなく要素を元の位置から移動できます。

translate() は 3 つの状況に分けられます:

1. translation(x,y) は水平方向と垂直方向に同時に移動します。

注: 移動移動の基点は、デフォルトでは要素の中心点ですが、基点はtransform-originに従って変更できます。

2 番目の値が設定されていない場合、デフォルトは 0 です。

2. 平行移動X(x) は水平方向のみに移動します。

はtranslate(x,0,)の略称に相当し、基点は要素の中心点になります。

3. 平行移動Y(y)は垂直方向にのみ移動します。

translate(0,y)の略称に相当し、基点は中心の要素です。

3. スケール スケーリング

スケール スケーリングは移動移動と非常によく似ており、3 つの状況があります。

ズームの中心点: つまり、要素の中心位置です

ベース: ズームは縮小または拡大できます。スケーリングのベースは 1 で、1 より大きい場合は拡大し、1 より小さい場合は縮小します。

1.scale(x,y) 要素は水平方向と垂直方向の両方にスケーリングします。

注: 2 番目のパラメータが指定されていない場合は、最初のパラメータと同じ値が取られます。

2.scaleX(x) x 軸のスケーリング。

3.scaleY(y) y 軸のスケーリング。

scale は負の値を取ることができ、負の値を指定すると要素が反転して拡大縮小されます。

<style>    div {    width: 100px;    height: 100px;    border-top: 1px dotted orange;    border-right: 1px solid red;    border-bottom: 1px solid pink;    border-left: 1px solid green;    text-align: center;    line-height: 100px;    color: red;    font-size: 15px;    transform: scale(-1.5);    margin: 0 auto;    margin-top: 50px;}</style><div>Scale(-1.5)</div>

4. スキューシアー

skew には、translate や scale など 3 つの状況があります。

1. skew(x,y): x 軸と y 軸のスキュー変換。

つまり、x 軸と y 軸は同時に特定の角度値に従ってねじれ、変形されます。

2 番目のパラメーターが指定されていない場合、値は 0、つまり y 軸にベベルはありません。

2. skewX(x): 指定された角度での X 軸に沿ったスキュー変換を指定します。

3. skewY(y): 指定された角度での Y 軸に沿ったスキュー変換を指定します。

5. 行列

matrix(d80b5def5ed1be6e26d91c2709f14170, d80b5def5ed1be6e26d91c2709f14170, d80b5def5ed1be6e26d91c2709f14170, d80b5def5ed1be6e26d91c2709f14170, d80b5def5ed1be6e26d91c2709f14170, d80b5def5ed1be6e26d91c2709f14170): 6 値を取ります (a, を指定します) b、c、d、e、f) 変換行列の形式での 2D 変換は、[a、b、c、d、e、f] 変換行列を直接適用することと同等です。水平方向と垂直方向に基づいて要素を再配置するだけです。

SVG、css3、html5 のキャンバスには行列変換があります。次にそれらについて簡単に説明します。

要素をレンダリングした後、ビットマップを取得し、ビットマップ上の各ポイントを変換して新しいビットマップを取得することで、変換、スケーリング、回転、せん断、ミラー反射の光効果を生成できます。

1. いくつかの概念

行列の乗算では、最初の行列の列数が 2 番目の行列の行数と等しい場合にのみ、2 つの行列を相互に乗算できるかどうかを確認する必要があります。 、このような 2 つの行列は乗算できます。

左乗算 [前乗算]: つまり、左の乗算、A の左に E が乗算され、AE になります。

m*n 行列に n*p 行列を乗算すると、m*p 行列が得られます。

2D 行列変換は 6 つのパラメーター a、b、c、d、e、f を提供します。基本的な式は次のとおりです:

このうち、x と y は要素の初期座標、x' と y' は行列です。変換後に取得された新しい座標。

注: 変換行列の 6 つのパラメーター a、b、c、d、e、f は垂直方向に配置されます。

x'=ax+cy+ey'=bx+dy+f

2. 行列変換と変換の関係

a、行列と平行移動

x'=ax+ cy+e、a=1、c=0、そして x'=x+e を設定します。

y'=bx+dy+f、同様に b=0、d=1 と仮定すると、y'=y+f。

これはtranslate(e,f)です。

したがって、translate(e,f) は、簡略化された変換行列 matrix(1,0,0,1,e,f)、

(x,y) translation (tx,ty) です。これは、次のことを意味します。 [1 0 0 1 tx,ty]。

b、行列とスケールのスケーリング

x'=ax+cy+e、c=0、e=0を設定し、その後x'=ax、

y'=bx+dy+f、b=を設定します0、f=0、その場合、y'=dy。

これはスケール(a,d)です。

つまり、scale(a,d) は、簡略化された変換行列行列 (a,0,0,d,0,0) です。

(x,y) スケーリング (sx,sy) は、[sx 0 0 sy 0 0] の行列変換を行うことを意味します。

c、行列と回転回転

rotate(a deg) は [cons(a) sin(a) -sin(a) cons(a) 0 0] 行列変換と同等です。

d、行列およびスキューせん断

skewX(a deg) は、[1 0 Tan(a) 1 0 0] の行列変換と同等です。

skewY(a deg) は、[1 Tan(a) 0 1 0 0] の行列変換と等価です。

つまり、マトリックスはすべての 2D エフェクトの組み合わせです。

6.transform-origin

前述したように、要素のデフォルトの基点はその中心位置ですが、transform-origin を使用してその基点を変更できます。

使用法:

transform-origin(x,y): 要素の基点 (参照点) を設定するために使用されます。デフォルトの点は要素の中心点です。 x と y の値はパーセンテージ、em、px にすることができます。x は left、center、right にすることもでき、y は top、center、bottom にすることもできます。これは、background-position と同じです。

7. リソースリンク

フロントエンド開発に必要な変換行列

CSS3: 変換と遷移の背後にある数学的原理 [冬]

CSS3 2D Transform

w3c css3-2d-transforms

w3c 回転定義

w3 ドキュメント、座標系と行列変換プロパティについて

w3 ドキュメント、SVG の 3D 変換行列

w3 ドキュメント、CSS 3 の 3D 変換行列

Transform スタイルと Perspective プロパティ