こんにちは、ハブラドラッグ！ インターネットでは、CSS3の変換および遷移の優れたアプリケーションの多くの例を見つけることができます。 この記事では、CSS3の基本を調べ、 このようなものを作成する方法を学びます。 このチュートリアルは、CSS3を使い始めたばかりの人に役立ちます。 同じように始めましょう！

座標系

オブジェクトの動きがどのように配置されているかを理解しやすくするために、座標系で作業します。



ただし、座標系には1つの特徴があります。Y軸は通常とは逆方向に向けられています。 なんで？ 実際、Webページは左上隅から始まり下に行くので、HTMLとCSSは（たとえばActionScriptと共に） 反対の座標系を使用します。

注： HTMLおよびCSSの構造に既に精通していることを前提としています。 CSSファイルの設定方法、画像の配置方法などの説明は省略します。 画像のアニメーションに焦点を当てます。 スキルが高いレベルにあるかどうかわからない場合は、 HTMLとCSSの30日間のレッスンコース（無料および英語）を見て、必要なすべてを学ぶことをお勧めします。

---

1：水平移動

最初に示す動きは水平です。 オブジェクトを左から右へ、右から左へ移動します。

右に移動

オブジェクトを移動するには、 transform：translate（x、y）を使用します。Xは正の数で、Y = 0です。



HTML

お気に入りのコードエディターを開き、次のように入力します。

<div id="axis" class="one"> <img class="object van move-right" src="images/van-to-right.png" alt="" /></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

写真の3つのクラスを特定しました。

• オブジェクト：オブジェクトの主なルールを確立します。
• van：さまざまなオブジェクトを使用して、各種類のアニメーションを示します。
• move-right：このクラスを使用して、オブジェクトを移動します。

CSS

まず、オブジェクト（トラック画像）を中央に配置します。

 .object { position: absolute; } .van { top: 45%; left: 44%; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この例では、オブジェクトを右に350px移動します。 使用される構文は、 transform：translate（350px、0）です。 。 さらに、オブジェクトは、上にマウスを移動したときにのみ移動します： #axis：hover .move-right。

 #axis:hover .move-right{ transform: translate(350px,0); -webkit-transform: translate(350px,0); /** Chrome & Safari **/ -o-transform: translate(350px,0); /** Opera **/ -moz-transform: translate(350px,0); /** Firefox **/ }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

変換パラメータは、オブジェクトをあるポイントから別のポイントに移動するだけですが、この移動のアニメーションは作成しません。 これを修正するには、.objectクラスにmoveパラメーターを追加する必要があります。

 .object { position: absolute; transition: all 2s ease-in-out; -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/ -moz-transition: all 2s ease-in-out; /** Firefox **/ -o-transition: all 2s ease-in-out; /** Opera **/ }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この移動ルールは、 ease-in-out機能を使用して、 すべてのオブジェクトパラメータを（遅延なしで） 2秒間アニメーション化するようブラウザに指示します。

移動のタイミングの6つの異なる機能を使用できます。

• 線形 ：動きは開始から終了まで一定の速度で発生します。
• 容易さ ：移動はゆっくり開始され、速度が上がります。
• イーズイン ：移動はゆっくり始まります。
• 緩和 ：移動はゆっくりと終了します。
• イーズインアウト ：移動はゆっくりと開始および終了します。
• cubic-bezier ：変位値の手動決定。

デモを見る

左に移動

オブジェクトを左に移動するには、 OX軸に負の値を設定するだけで、 Yは変更されません。 この場合、オブジェクトを-350ピクセル左に移動します。





HTML

新しいHTMLドキュメントを作成し、次のコードを貼り付けます。

 <div id="axis" class="two"> <img class="object van move-left" src="images/van-to-left.png"/> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

今回は、オブジェクトを左に移動するためにmove-leftクラスを使用します。



CSS

OX軸に-350pxと入力します。 変換：変換（-350ピクセル、0）; -オブジェクトを左に移動します。

 #axis:hover .move-left { transform: translate(-350px,0); -webkit-transform: translate(-350px,0); /** Safari & Chrome **/ -o-transform: translate(-350px,0); /** Opera **/ -moz-transform: translate(-350px,0); /** Firefox **/ }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

以前に移動ルールを定義したため、これを再度行う必要はありません。

デモを見る

---

2：垂直移動

オブジェクトを垂直方向に移動するのは難しくありません。水平方向と同じだからです。 唯一の違いは、 -y値を使用して上に移動し、 y値を使用して下に移動することです。

上に移動

HTML

HTMLテンプレートは前の例と同じです。 ただし、オブジェクトをロケットに置き換え（わかりやすくするため）、上に移動するクラスを割り当てます。

 <div id="axis"> <img class="object rocket move-up" src="images/rocket.png"/> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

CSS

トラックと同様に、ロケットを中央に配置します。

 .rocket { top: 43%; left: 44%; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

前述したように、Y座標は負でなければなりません。 この場合、オブジェクトを350ピクセル上に移動します。

 #axis:hover .move-up { transform: translate(0,-350px); -webkit-transform: translate(0,-350px); -o-transform: translate(0,-350px); -moz-transform: translate(0,-350px); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

デモを見る

下に移動

ご想像のとおり、オブジェクトを下に移動するには、Y座標が正でXが0である必要があります。構文： translate（0、y）;





HTML

 <div id="axis" class="four"> <img class="object coin move-down" src="images/coin.png"/> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

CSS

 #axis:hover .move-down { transform: translate(0,350px); -webkit-transform: translate(0,350px); -o-transform: translate(0,350px); -moz-transform: translate(0,350px); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

デモを見る

---

3：斜めの動き

オブジェクトを斜めに移動するには、 xパラメーターとyパラメーターを組み合わせます。 構文は次のとおりです。transform：translate（x、y）。 方向に応じて、 xとyの値は正または負のいずれかになります。





HTML

 <div id="axis" class="five"> <img class="object plane move-ne" src="images/paper-plane.png"/> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

CSS

 #axis:hover .move-ne { transform: translate(350px,-350px); -webkit-transform: translate(350px,-350px); -o-transform: translate(350px,-350px); -moz-transform: translate(350px,-350px); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

デモを見る

---

4：回転

CSS3の回転は、角度座標（0°から360°）によって制御されます。 オブジェクトを回転するには、次のパラメーターを使用します。transform：rotate（ndeg） ; nは度です。

時計回りの回転

オブジェクトを時計回りに回転するには、正の値を適用して回転（ndeg）します。



HTML

 <div id="axis" class="six"> <img class="object pencil rotate360cw" src="images/pencil.png"/> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

CSS

 #axis:hover .rotate360cw { transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -moz-transform: rotate(360deg); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

反時計回りの回転

オブジェクトを反時計回りに回転させるには、 rotate（ndeg）に負の値を適用します。





HTML

 <div id="axis" class="seven"> <img class="object pencil rotate360ccw" src="images/pencil.png"/> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

CSS

 #axis:hover .rotate360ccw { transform: rotate(-360deg); -webkit-transform: rotate(-360deg); -o-transform: rotate(-360deg); -moz-transform: rotate(-360deg); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

デモを見る

---

5：スケーリング

スケーリングはCSS3の興味深い機能です。 scale（n）パラメーターまたはscale（x、y）パラメーターを使用して、HTML内でオブジェクトを直接増減できます。 オブジェクトは、n / x、yの値に応じてサイズが変更されます。X軸は幅、Yは高さです。

次の例を見てみましょう。





HTML

 <div id="axis" class="eight"> <img class="object car larger" src="images/car.png"/> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

CSS

 #axis:hover .larger{ transform: scale(2); -webkit-transform: scale(2); -o-transform: scale(2); -moz-transform: scale(2); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

デモを見る

---

6：複数の動き

基本的な動きと変換を調べた後、それらを組み合わせてみることができます。





HTML

 <div id="axis" class="ten"> <img class="object boomerang multiple-move" src="images/pencil.png"/> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

CSS

計画は次のとおりです。ブーメランを右上隅に移動し、同時に回転させる必要があります。 これを行うには、スペースで区切ってコマンドをリストします。

 #axis:hover .multiple { transform: translate(350px, -350px) rotate(360deg); -webkit-transform: translate(350px, -350px) rotate(360deg); -o-transform: translate(350px, -350px) rotate(360deg); -moz-transform: translate(350px, -350px) rotate(360deg); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

デモを見る

---

おわりに

そのため、この記事では、変換の主な例を検討しました。 異なるブラウザーとの互換性に注意することを忘れないでください。 また、これらの効果を無理にしないでください。デザインを改善するだけでなく、デザインを損なう可能性もあります。

---

ソースをダウンロード

---