CSSで回転効果を実現する方法（コード例）

CSS は広く使用されている Web ページ スタイルのデザイン言語であり、回転は一般的に使用される効果の 1 つです。 CSS を使用した回転により、Web ページをより美しく、直感的にすることができます。参考までに、一般的に使用される CSS 回転コードをいくつか紹介します。

1. 変換属性を使用する

変換属性を使用すると、要素の回転、拡大縮小、傾斜、移動などが可能になります。要素は、rotate() メソッドを使用して回転できます。ここで、deg は回転角度の値で、正の数値は時計回りの回転を示し、負の数値は反時計回りの回転を示します。

例:

.rotate {
transform:rotate(45deg);
}

2.transformのtransition属性とrotateメソッドを使用します。

transition 属性は要素のトランジション効果を制御し、回転時に要素にスムーズなトランジション効果を与えることができます。

例:

.rotate {
トランジション: トランスフォーム 0.5 秒イーズインアウト;
}
.rotate:hover {
トランスフォーム: 回転( 45 度);
}

3. アニメーション属性と @keyframes ルールを使用する

@keyframes ルールは CSS アニメーションのキー フレームを定義でき、アニメーション属性は CSS アニメーションのパフォーマンスを制御できます。 . .

例:

.rotate {
アニメーション:rotate-ani 2s Linear Infinite;
}
@keyframesrotate-ani {
from {

transform: rotate(0deg);

}
から {

transform: rotate(360deg);

}
}

上記は、さまざまな方法で要素の回転効果を実現する、一般的に使用されるいくつかの CSS 回転コードです。これらのコードが困っている読者を助け、Web ページをより美しく鮮やかなものにすることを願っています。

以上がCSSで回転効果を実現する方法（コード例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。