2Dアニメーションを実現する方法

要約（サマリコンテンツを表示または非表示にする]をクリック）

文の要約：プロパティの値がパラメータであるである属性、属性値1.translate（）2.rotate（）3.scaleを（）、変換。

1、変換：相対的な差を翻訳し、相対的な位置関係？

回転がまったく同じでないときは、文書フローを占領した後、移動しています

しかし、回転後、変換：画像を直接移動座標系を回転させ並進、

ブラウザウィンドウに対する相対位置の相対的な矩形座標系の移動で構成されています

図2に示すように、画像回転、画像を直接ブラウザ・ウィンドウに座標系または操作にそれを移動？

ノー

、ブラウザを認識しない同定された唯一の写真を絵軸を回転させます

3、どのように画像対角線移動（又は角度に向かって移動しますか）？

ローテーションは、その後、移動（翻訳）

4、キー単語がどのようなアニメーションで、どのような性質の動きの値は、キー単語がある回転しますか？

変換

1.translate（）
2.rotate（）
3.scale（）

5、どのように動くかの要素を回転させるには？

2変換：（300ピクセル、300ピクセル）を変換。

16変換：回転（20deg）。

6、どのように絵に隠さのdivを超えて取得しますか？

17オーバーフロー：隠されました;

図7に示すように、属性値（並進および回転）は、2次元アニメーションの動きパラメータは何ですか？

私はそれを暗記するのではなく、心で考えます

2変換：（300ピクセル、300ピクセル）を変換。

16変換：回転（20deg）。

8、時間指定イベントを設定する方法jQueryの？

JSのように

setInterval引数は匿名関数で、パラメータは時間であります

33のsetInterval（関数（）{ 
34のS + = V; 
35 obj.css（{ '変換'： '回転（20deg）変換（' + S + 'PX、0PX）'}）; 
36} 10）。

第二に、どのように2Dアニメーションを達成するために

1、サポート技術情報

2Dスタイル：
1.translate（）
2.rotate（）
3.scale（）

図2に示すように、コード

相対的な動きを翻訳

1 DIV { 
2変換：（300ピクセル、300ピクセル）翻訳します; 
3}

翻訳し、2D回転を実現する回転

1 <！DOCTYPE HTML> 
 2 <HTML LANG = "EN"> 
 3 <ヘッド> 
 4 <メタ文字コード= "UTF-8"> 
 5 <タイトル>インデックス</タイトル> 
 6 <スタイル> 
 7 * { 
 8フォントファミリ：微软雅黑。
 9マージン：0PX。
10} 
11          
12 DIV { 
13幅：256PX。
14身長：256PX。
15背景：#CCC; 
16変換：回転（20deg）。
17オーバーフロー：隠されました; 
18}     
19 
20 </スタイル> 
21 <スクリプトSRC = 'jquery.min.js'> </ SCRIPT> 
22 </ HEAD> 
23 < 
26 </ div> 
27 </ BODY> 
28 <スクリプト> 
29 $（ 'DIV'）（関数（）{をクリックします。
30のS = 0; 
31 V = 10; 
32 OBJ = $（この）; 
33のsetInterval（関数（）{ 
34のS + = V; 
35 obj.css（{ '変換'：+ S + 'PX、0PX）を'回転（20deg）（翻訳'} ）; 
36}、10）; 
37}）。    
38 </スクリプト> 
39 </ HTML>

自動回転を達成2D回転

1 <！DOCTYPE HTML> 
 2 <HTML LANG = "EN"> 
 3 <ヘッド> 
 4 <メタ文字コード= "UTF-8"> 
 5 <タイトル>インデックス</タイトル> 
 6 <スタイル> 
 7 * { 
 8フォントファミリ：微软雅黑。
 9マージン：0PX。
10} 
11          
12 DIV { 
13幅：256PX。
14身長：256PX。
15背景：#CCC; 
16オーバーフロー：隠されました。
17境界半径：256PX。
18}     
19 
20 </スタイル> 
21 <スクリプトSRC = 'jquery.min.js'> </ SCRIPT> 
22 </ HEAD> 
23 <BODY> 
26 </ div> 
27 </ BODY> 
28 <スクリプト> 
29 $（ 'DIV'）（関数（）{をクリックします。
30のS = 0; 
31 V = -10; 
32 OBJ = $（この）; 
33のsetInterval（関数（）{ 
34のS + = V; 
35 obj.css（{ '変換'： 'が回転（' + S + 'DEG）'}）; 
36}、 10）; 
37}）。    
38 </スクリプト> 
39 </ HTML>