CSSで画像を回転するように設定する方法

CSSで画像を連続回転させる設定方法：[-webkit-transform:rotate(360deg);animation:rotation;]のようにanimation属性とtransform属性を使用して設定できます。

このチュートリアルの動作環境: Windows 10 システム、CSS3 バージョンこの方法は、すべてのブランドのコンピューターに適しています。

(学習ビデオ共有: css ビデオ チュートリアル )

CSS で画像を連続的に回転するように設定する方法:

関連属性:

animation アニメーション属性

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

属性値:

• animation-name バインドするキーフレームの名前を指定しますセレクター

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

• #animation-timing-function アニメーションの完了方法を設定しますサイクル

• animation-delay アニメーションが開始するまでの遅延間隔を設定します。

• animation-iteration-count アニメーションの再生回数を定義します。

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

• animation-fill-mode アニメーションが再生されていないとき (アニメーションが完了したとき、またはアニメーションの再生が開始されるまでに遅延があるとき) に要素に適用するスタイルを指定します。 ）。

• animation-play-state アニメーションが実行中か一時停止中かを指定します。

• #initial プロパティをデフォルト値に設定します。

• inherit 親要素から属性を継承します。

Transform プロパティは、要素に 2D または 3D 変換を適用します。このプロパティを使用すると、要素の回転、拡大縮小、移動、傾斜などを行うことができます。

transform: none|transform-functions;

属性値:

• none 定義は変換されません。

• matrix(n,n,n,n,n,n) 6 つの値の行列を使用して 2D 変換を定義します。

• matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) は 3D 変換を定義します。 16 値の 4x4 マトリックスを使用します。

• translate(x,y) 2D 変換を定義します。

• translate3d(x,y,z) 3D 変換を定義します。

コード実装:

html コード:

<div class="demo">
    <img  class="an img" src="/test/img/2.png"    style="max-width:90%"  style="max-width:90%"/ alt="CSSで画像を回転するように設定する方法" >
</div>

ローテーション コード:

.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;}

実現効果:

関連する推奨事項: CSS チュートリアル

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