、CSS3変換
運動の変換によって達成さ、スケール、回転のための要素を延伸する効果; この効果を達成することができ、元の画像又はJS処理である必要があり、それは今CSS3によって達成することができます。使用した2D変換変換効果を達成するためにプロパティを。
transformプロパティの第二に、値
- ）（回転関数とすることができる回転機能
- スケール（）関数ができ、ズーム機能を
第三に、機能の使用
回転（度）回転する：変換
- 変換値を持つ属性回転機能括弧内ユニットは回転の角度であり、DEG（学位度）、所要の角度が正であってもよく、または負であってもよいし。
- 値は時計回りの回転（左）で、負（右に）反時計回りに回転に応じて
- 我々が使用することができ、コードを編集する場合trsf拡張プリフィックスも出て拡張されます（ランダム入力trsfは、その変換表示されません：回転を（）プロパティ値）
例1：
本部ボックスを構築、ボックスはマウスオーバー達成するために時計回りに回転させて30度の効果を。（我々の角度が負の値に設定されている場合、それは左に傾きます）
1 <！DOCTYPE HTML > 2 < HTML langは= "EN" > 3 < ヘッド> 4 < メタのcharset = "UTF-8" > 5 < タイトル> 2D转换</ タイトル> 6 < スタイル> 7 本体{ 8 位置：相対。 9 幅：400ピクセル; 10 高さ：400ピクセル; 11 / * トップ：100ピクセル; * / 12 / * 左：100ピクセル; * / 13 / * 境界：2ピクセル赤色固体。* / 14 15 } 16 DIV { 17 幅：100pxに。 18 高さ：75px ; 19 背景色：＃939 。 20 境界：2ピクセル青色固体。 21 位置：絶対。 22 } 23 #rotateDiv { 24 トップ：300ピクセル; 25は 左：100pxに。 26 } 27 #rotateDiv：ホバー{ 28 変換：回転（30度）を、 29 ; } 30 </ スタイル> 31 </ ヘッド> 32 < ボディ> 33 < DIV ID = "rotateDiv" > transform2 </ DIV > 34 </ ボディ> 35 </HTML >
パフォーマンスの結果：
変換：スケール（x、y）は、ズーム
- 変換値がする属性の機能拡張時に、それを設定することができ、水平方向に及び垂直方向にスケーリング。
- X：倍率水平方向（横方向）。Y：垂直方向（高さ）で、複数のスケーリング、省略された場合、xの値と（例えば、変換：スケール（1.3）が水平および垂直に1.3の倍数で表します）
- XとYとの間に設けられた値（0〜1）還元、（> 1）拡大
例2：
ホバーボックスの上に実装されている場合は、ボックスには1.3倍の効果を拡大しました。
1 <！DOCTYPE HTML > 2 < HTML langは= "EN" > 3 < ヘッド> 4 < メタのcharset = "UTF-8" > 5 < タイトル> 2D转换</ タイトル> 6 < スタイル> 7 本体{ 8 位置：相対。 9 幅：400ピクセル; 10 高さ：400ピクセル; 11 / * トップ：100ピクセル; * / 12 / * 左：100ピクセル; * / 13 / * 境界：2ピクセル赤色固体。* / 14 } 15 DIV { 16 幅：100pxに。 17 高さ：75px ; 18 背景色：＃939 。 19 境界：2ピクセル青色固体。 20 位置：絶対。 21 } 22 ＃BOX1：ホバー{ 変換：スケール（1.3）} 23 </ スタイル> 24 </ ヘッド> 25 < ボディ> 26 < DIV ID = "BOX1" > transform1 </ DIV > 27 </ ボディ> 28 </ HTML >
パフォーマンスの結果：
