CSSで画像を回転させる方法

CSS で画像を回転する方法: 最初に HTML サンプル ファイルを作成し、次に img タグを介して画像を導入し、最後に画像の回転効果を実現するために、img 画像に変換とアニメーション スタイルの属性を追加します。

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

画像の回転効果を実現するために、画像イメージに変換およびアニメーション スタイル属性を追加できます。

例:

HTML コード:

<div class="demo">
    <img class="an img" src="/test/img/2.png" width="500" height="500"/>
</div>

css コード:

.demo{text-align: center;
    margin-top: 100px;}
@-webkit-keyframes rotation{
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}
.an{
    -webkit-transform: rotate(360deg);
    animation: rotation 3s linear infinite;
    -moz-animation: rotation 3s linear infinite;
    -webkit-animation: rotation 3s linear infinite;
    -o-animation: rotation 3s linear infinite;
}
.img{border-radius: 250px;}

画像を実現するために、画像イメージに変換とアニメーション スタイルの属性を追加しました。 360度回転アニメーション効果。

CSSアニメーション画像の自動回転効果を実現する方法は上記の通りです。 CSS の変換プロパティとアニメーション プロパティをマスターしていれば、ほとんどのアニメーション効果を実現できます。それらの原則は基本的に同じです。

transform プロパティは、要素に 2D または 3D 変換を適用します。このプロパティを使用すると、要素を回転、拡大縮小、移動、または傾けることができます。 rotate() メソッドを使用すると、要素は指定された角度だけ時計回りに回転します。負の値が許可され、要素は反時計回りに回転します。

アニメーション プロパティは、6 つのアニメーション プロパティを設定するための短縮プロパティです。

animation-name は、セレクターにバインドする必要があるキーフレーム名を指定します。

animation-duration アニメーションが完了するまでにかかる時間を秒またはミリ秒で指定します。

animation-timing-function はアニメーションの速度曲線を指定します。

animation-delay アニメーションが開始されるまでの遅延を指定します。

animation-iteration-count は、アニメーションを再生する回数を指定します。

animation-direction は、アニメーションを順番に逆方向に再生するかどうかを指定します。

【推奨学習: css ビデオ チュートリアル 】

以上がCSSで画像を回転させる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。