IT・ブラザーズHTML5 CSS3プロパティのチュートリアル特殊効果の2D変換のバンド2

5f16a58a57bc47108e1c532aebeafd05.jpg

 

3スケール()メソッド

スケール()メソッドは、要素のサイズが増加することによって、または所定の幅(X軸方向)及び高さ(Y軸)のパラメータに応じて減少します。オブジェクトの要素はセンター起源に従ってスケーリングされるように、ズームスケール()関数。要素が大きく見えるように、任意の値より大きい、または1.01に等しい、デフォルト値は1であるため、0.01と0.99の間の任意の値、そう狭い要素こと。一つの値だけ、第二の値は、最初のデフォルト値に等しい場合は、スケールをズーム()及び(変換)関数は構文に非常に似ている、それは値を受け入れることができ、両方の値は、受け入れてもよいです。たとえば、次のスケール(2,2)がX軸及びY軸の要素が二倍に増幅ことながらスケール(1,1)要素は、任意の変更を持っていません。構文は次のとおりです。

スケール(SX)

または:

スケール(SX)

表4に記載したように機能し、プロパティの値:

表4スケール()関数と記載回転のプロパティ値

画像/ 20191127 / 9f6edcb9b736e01084f824ed18994c31.png

   

 

また、我々は小規模なケースを通して方法を説明します。そこに二つの絵並べも使用スケール(1.2,1.2)、X軸とすることができ、第二に、我々は1.2倍拡大した写真画像を使用し、前記スケールは、(1.2)を使用してもよい、であり、Y軸は、1.2を拡大しています回。コードは以下の通りであります:

画像/ 20191127 / 55ebd3a280c8ee6cc46d37966e725efe.png

 

ここで、我々は2枚の画像を表示し、オリジナルを表示する最初は、二つ目は1.2倍に拡大されます。ブラウザ図6の結果の実装:

画像/ 20191127 / 15d03e70f0652454415fa26bbbfa4313.jpeg

図6スケールスケーリング関数

 

値が「0」に設定されている場合は、要素が消えます。明示的に値に設定した場合にのみ機能は、ちょうど私達は、()スケールオブジェクトをズームインまたはズームアウトするに比例して発生します。

スケール()関数は、正の値、負の値であることに加えて行くことができます。ときにのみ負の要素が反転して、ズームします。要素をスケーリングするスケール()関数は、中央要素に固定されているが、要素点変換原点によって変更することができます。

 

4  skew() 方法

()メソッドは、要素は、所定の水平線(X軸)及び垂直線に係るスキューパラメータによって所定の角度(Y軸)を回転させます。スキュー()関数は、表示素子の傾斜の傾斜を可能にします。それは、その特定の角度で傾斜し、X軸とY軸中心位置を中心物体であってもよいです。この回転()関数の異なる回転、回転()関数は、単純に要素の形状を変更することなく回転します。スキュー()関数が回転するが、唯一の形状変化素子ありません。構文は次のとおりです。

 スキュー(AX)

または:

スキュー(AX、AY)

 

表5に記載したように機能し、プロパティの値:

表5スキュー()関数と属性値が記述さ

 

image/20191127/2a935f8d79b11f5f42991ffe88339167.png

 

スキュー()関数を説明するために簡単な例を使ってみましょう。コードは以下の通りであります:

image/20191127/74eba3ced993c33ad84ece945b6ae718.png

 

ここでは、画像に処理した後、第二のスキュー()関数、30度横傾斜、垂直傾斜10degを二つの画像、第一表示を示しています。ブラウザレーン7で実行:

image/20191127/215aafb3b5cc33243468b5162ac592d5.jpeg

図7スキューチルト機能

 

スキュー傾き()とCSS3の変形としての機能(翻訳)、スケール()関数、したがって機能素子のみ水平または垂直方向に傾斜していること(AX、AY)のスキューに加えて使用することができます。

skewX値():スキュー(AX、0)、及びスキュー(AX)に対応します。Xに沿って所定の変形の傾斜の指定された角度によって軸 skewX値()ように、その中心要素基点、水平方向(X軸)の傾きや変形。

skewY():スキューに対応する(0、AY)。Y変形を軸に沿って傾斜して所定の角度で指定されました。skewY()ように、その中心要素基点、垂直方向(Y軸)の傾きや変形。

デフォルトでは、スキュー()関数の変形を傾斜元の要素の要素の中心点です。我々は平等にトランスフォーム起源プロパティは、要素へのポイントのリセット素子が変形傾斜している可能性がありよります。

おすすめ

転載: www.cnblogs.com/itxdl/p/11968696.html