CSS3 傾斜傾斜と回転animation_html/css_WEB-ITnose

css3 が登場する前は、JavaScript または Jquery を使用してオブジェクトの一連の連続アニメーションを記述する必要があり、スクリプト コードはより複雑でした

傾きや回転などのアニメーションを実装する必要がある場合は、 （まだ試していないがJavaScriptやJqueryを使って実装する方法）、実装できたとしても時間コストやメンテナンス難易度が非常に高いことが予想される。このようなアニメーション ファイルを作成するには、描画ツールに頼るしかありません。

スクリプト言語を使用しなければ、アニメーション ファイルを作成するために絵を描く必要がなく、傾きやアニメーション効果を実現できるのではないかと時々思います。 Web ページ上の回転。

最近、暇を見つけて CSS3 を学習しました。CSS3 には多くのアニメーションのサンプルが含まれており、それを学習して整理するのに時間がかかりました

今日は、html+css3 を使用して傾斜傾斜と回転を実装する方法を共有します。最初に最終的なレンダリングを見てみましょう (ここでは効果を示すために、QQ 画面を使用して複数の写真を切り取り、それらを gif アニメーションに作成して簡単に示しました。効果が異なっている場合はご容赦ください。 Good)

図 1

具体的な手順は次のとおりです:

1. 2 つの div を配置します。1 つはコンテナー (図 1 の緑色の背景部分) (図 1 id="warp")、もう 1 つはアニメーションとして配置します。要素 (図 1 id="box" の黄色の背景の部分)

HTML コード:

<div id="warp">    <div id="box">WEB</div></div>

CSS コード (コンテナ要素とアニメーション要素のデフォルトのスタイルを設定):

#warp { width: 320px; height: 320px; background: #6FDE82; margin: 20px auto;}#box { height: 40px; width: 40px; background: yellow; position: relative; top: 280px; left: 0;                }

注: #box{position:relative;} は、この要素の後続のアニメーションを準備するためのものです。これは、アニメーション プロセス中に必要になるためです。その位置を変更するため、ここでは相対位置指定が使用されます

上記のコードは、基本的な HTML CSS です。誰もがそうする必要があります。元気でいてください

このときの効果は以下の通りです:

2. CSS3 @keyframes を使用してアニメーションをカスタマイズします

CSS コード：

@keyframes move { 0% { top: 280px; left: 0; transform: skewX(0deg); width: 40px; height: 40px;    } 20% { top: 0; left: 0; transform: skewX(50deg); width: 60px; height: 20px; background: red;    } 22% { top: 0; left: 0; transform: skewX(0deg); width: 40px; height: 40px;    } 30% { top: 0; left: 0; transform: skewX(0deg); width: 320px; height: 40px;    } 40% { top: 0; left: 280px; transform: skewX(0deg); width: 40px; height: 40px; background: green;    } 50% { top: 0; left: 280px; transform: skewX(0deg); width: 20px; height: 320px;    } 55% { top: 280px; left: 280px; transform: skewX(0deg); width: 40px; height: 40px; background: blue;    } 60% { transform: rotate(-90deg); transform-origin: left bottom;    } 65% { transform: rotate(-180deg); transform-origin: left top;    }}

コード分析:

1. css3カスタムアニメーションでは @keyframes ルールを使用する必要があります。詳細については、CSS3 @keyframes ルールを参照してください

2. アニメーション実行の進行状況を設定します

   この例では、0% 20 % 22% 30% 40% 50% 55% 60% 65% アニメーションの進行状況を定義しています。

   パーセンテージとは正確には何を意味しますか?

   例: アニメーション全体が 10 秒間実行される場合、20% はアニメーションが 2 秒間実行されたときの効果を表します。したがって、カスタム アニメーション全体の変換では、実行の進行ごとに CSS スタイル (幅、高さ、色など) を定義し、一貫したアニメーション効果を形成します。実行の進捗率は実際の状況に応じて調整できます。

   注: たとえば、この例では 65% にのみ設定されています。これは、残りの 35% が CSS3 自体によって完了し、アニメーションが返されることを意味します。元の状態に戻す（試してみることができます）

3. 要素の傾き（要素の変形）、回転（要素の変形なし）

   この例では、傾きと回転のアニメーションを使用し、傾きには skew() を使用します。パラメータは傾きの度合いです。回転の場合は、rotate() を使用します。パラメータは角度です。

反時計回りに正に回転し、Y 軸が時計回りに正に回転します。この例では、効果は次のようになります

ここでは Y 軸の例は示しません。上記のヒントに従って効果を自分でテストできます

transform-origin、要素 中心点を傾けたり回転させたりします。特定の属性値については、CSS3 のtransform-origin 属性を参照してください。 ここでの中心点は、要素がこの点を中心に回転または傾斜しても、この点の座標は変わりません。理解を容易にするために頭の中でいくつかの幾何学図形を生成する必要があると感じた場合、あるいはテーブルの上に紙 (携帯電話など) を置き、オブジェクトの特定の点を手で固定して回転効果を実証する必要があると感じた場合理解できるでしょう

3. カスタムアニメーションを実行します

CSS コード:

#box { height: 40px; width: 40px; background: yellow; position: relative; top: 280px; left: 0; animation: move 5s infinite;}

コード分析:

animation: move 5s infinite;

の意味カスタム アニメーションが完了するまでに 5 秒かかり、実行されることを確認します。無限ループ

animation 属性 詳しい説明はこちらをご覧ください CSS3 アニメーション (アニメーション) プロパティ

OK、上記の手順と原則は誰もが知っています。この例の完全なコードは次のとおりです。これを直接コピーして実行すると、効果がわかります。今日の共有はこれで終わりです。今後も共有してください。興味のあるお友達は私の記事にコメントしてください