ホームページ >ウェブフロントエンド >CSSチュートリアル >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" 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 サイトの他の関連記事を参照してください。