CSS3で画像を連続的に回転させるにはどうすればよいですか? 【詳しい説明】

この記事では、CSS3 を使用して画像の連続回転の効果を実現する方法を詳しく紹介します。たとえば、いくつかの画像を表示する必要があるなど、Web ページをデザインする際にさまざまな問題が発生します。角が丸い、画像をクリックすると表示やその他の効果が拡大されます。

前回の記事で画像の角丸を表示する具体的な方法を紹介しましたので、こちらの記事【CSSで画像のランダムな角丸スタイルを制御するには？ 】

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

HTMLコード例は以下の通りです

<div class="demo">
    <img  class="an img" src="/test/img/2.png"    style="max-width:90%"  style="max-width:90%"/ alt="CSS3で画像を連続的に回転させるにはどうすればよいですか? 【詳しい説明】" >
</div>

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

上記のコードは、テストのためにローカルに直接コピーして貼り付けることができます。その後、ブラウザーからアクセスすると、次のようになります:

画像のアップロードにはサイズ制限があるため。 、GIF スクリーンショットは圧縮されているため、画像を回転できなくなる可能性があります。ただし、通常の状況では、指定された時間速度に従って回転します。この属性は、すべてのアニメーション属性の略称であることに注意してください。画像に 360 度の回転アニメーション効果を実現できるように、画像イメージに変換とアニメーション スタイルの属性を追加しました。

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

それでは、css3を使って画像を自動的に360度回転させるアニメーション効果を実現する具体的な方法については以上になります。一定の参考値があるので、困っている友達のお役に立てれば幸いです！

以上がCSS3で画像を連続的に回転させるにはどうすればよいですか? 【詳しい説明】の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。