<div transform rotate> 是CSS中的一種變換方法，用于對HTML元素進行旋轉操作。通過設置 transform 屬性的 rotate 值，可以使元素以指定的角度旋轉。這個角度可以按照正值（順時針）或負值（逆時針）來進行設置。
下面將通過幾個具體的代碼案例來詳細解釋<div transform rotate>的用法和效果。，我們來創建一個簡單的HTML頁面，其中包含一個紅色的矩形塊元素：

下面的示例演示了如何使用<div transform rotate>對矩形塊元素進行順時針旋轉45度：

<code>
<style>
.rotate {
width: 100px;
height: 50px;
background-color: red;
transform: rotate(45deg);
}
</style>
<br>
    <div class="rotate"></div>
</code>

可以看到，通過給元素設置 transform 屬性的 rotate 值為45deg，該元素就會以順時針旋轉45度。如果需要逆時針旋轉，只需要將 rotate 的值改為負數即可。

下面再來看一個示例，演示如何使用<div transform rotate>對圖片進行旋轉。，我們需要將圖片添加到HTML頁面中：

下面的示例演示了如何使用<div transform rotate>對圖片進行逆時針旋轉90度：

<code>
<style>
.rotate-img {
width: 200px;
height: 200px;
transform: rotate(-90deg);
}
</style>
<br>
  <img class="rotate-img" src="image.jpg" alt="旋轉圖片">
</code>

在上述代碼中，給圖片元素添加了一個名為 rotate-img 的類，并設置了 transform 屬性的 rotate 值為-90deg，表示逆時針旋轉90度。這樣，圖片就會沿順時針方向旋轉90度。

一個常見的應用場景是在制作橫豎屏切換的頁面時使用<div transform rotate>來旋轉界面的方向。以下是一個實際案例：

我們假設有一個頁面，在用戶點擊按鈕后，需要將整個頁面旋轉90度，以實現橫豎屏切換的效果。以下是實現這一效果的示例代碼：

<code>
<style>
.rotate-screen {
width: 100vw;
height: 100vh;
transform-origin: top left;
transition: transform 0.5s ease;
}
<br>
    .rotate-button {
width: 100px;
height: 50px;
background-color: blue;
color: white;
}
<br>
    .rotate-button:hover {
cursor: pointer;
}
<br>
    .rotate-button:active {
background-color: darkblue;
}
</style>
<br>
  <div class="rotate-screen">
<button class="rotate-button" onclick="rotatePage()">點擊旋轉頁面</button>
</div>
<br>
  <script>
function rotatePage() {
var page = document.querySelector(".rotate-screen");
page.style.transform = "rotate(90deg)";
}
</script>
</code>

在上述代碼中，點擊按鈕后會觸發 rotatePage 函數，該函數通過獲取頁面元素的引用，并通過修改其 transform 屬性，將頁面旋轉90度。為了實現平滑的過渡效果，還使用了 CSS 中的 transition 屬性來設置變換過渡的時間和速度。

以上是關于<div transform rotate>的一些代碼案例和解釋，通過使用這個功能強大的CSS屬性，我們可以輕松地對HTML元素進行旋轉操作，實現更豐富多樣的頁面效果。