Font Awesomeアイコンを回転させる方法

CSSを使用した回転: Font Awesomeのアイコンには、回転させるためのCSSクラスが用意されています。例えば、fa-rotate-90クラスを使用すると、アイコンを90度回転させることができます。他の回転角度に対応するクラスもあります（fa-rotate-180、fa-rotate-270など）。以下は例です:

<i class="fas fa-camera fa-rotate-90"></i>

CSSアニメーションを使用した回転: CSSアニメーションを使用すると、よりスムーズな回転効果を実現することができます。例えば、以下のようなCSSを使用してアイコンを回転させることができます:

<style>
@keyframes rotate {
 from {
   transform: rotate(0deg);
 }
 to {
   transform: rotate(360deg);
 }
}
.fa-rotate {
 animation: rotate 2s infinite linear;
}
</style>
<i class="fas fa-camera fa-rotate"></i>

JavaScriptを使用した回転: JavaScriptを使用すると、より高度な回転制御を行うことができます。以下はJavaScriptを使用したアイコンの回転例です:

<script>
function rotateIcon() {
 var icon = document.getElementById("my-icon");
 var currentRotation = parseInt(icon.style.transform.replace("rotate(", "").replace("deg)", ""));
 var newRotation = currentRotation + 45; // 45度ずつ回転
 icon.style.transform = "rotate(" + newRotation + "deg)";
}
</script>
<i id="my-icon" class="fas fa-camera"></i>
<button onclick="rotateIcon()">回転</button>