CSSで要素を常に回転するように設定する方法

CSS で要素を回転するように設定する方法: 最初に HTML サンプル ファイルを作成し、次に img を使用して画像を導入し、最後に CSS スタイル「transform:rotate(360deg)」を使用して要素を回転するように設定します。 360 度、アニメーション期間を渡す プロパティを使用してアニメーション期間を設定するだけです。

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

Web ページをデザインするとき、さまざまな問題に遭遇することがよくあります。写真によっては角が丸く表示されたり、写真をクリックすると拡大したりする必要があるなど、写真の表示に関する問題があります。

css3を使って画像の自動巡回360度回転を実現する具体的な方法を中心に紹介します

CSSではtransform属性を使って要素に回転、拡大縮小、移動、傾きを設定することができます。

CSS スタイルのtransform:rotate(360deg) を使用して、要素を 360 度回転するように設定できます。

アニメーションを使用してアニメーション プロパティを設定できます。アニメーションの継続時間は、animation-duration プロパティを通じて設定できます。

css3 要素の CSS スタイルを transform:rotate(360deg) に設定することで要素の回転角度を 360 度に設定し、animation-duration 属性でアニメーション期間を設定して要素の連続回転を実現できます。 。

例:

HTML コード:

<div class="demo">
<img  class="an img lazy"  src="/static/imghw/default1.png"  data-src="1.jpg"       style="max-width:90%"  style="max-width:90%"/ alt="CSSで要素を常に回転するように設定する方法" >

CSS 画像を 360 度回転するアニメーション コードの例は次のとおりです:

.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: 200px;}

レンダリング:

推奨される学習: 「css ビデオ チュートリアル 」

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