<div>旋轉180度是一種CSS變換效果，它可以使一個<div>元素繞其中心點旋轉180度。這意味著元素的內容、邊框和背景樣式都會被旋轉。在這篇文章中，我們將使用幾個代碼案例來詳細解釋這個效果的實現。</div>
<div>

，我們來看一個基本的示例：

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

在上面的代碼中，我們創建了一個寬高為100像素、紅色背景的<div>元素。通過設置transform屬性的rotate值為180度，我們將元素旋轉了180度，使其內容和背景都發生了反轉。

</div>
<div>

接下來，讓我們來看一個稍微復雜一些的案例，其中將應用過渡效果：

<div style="width: 100px; height: 100px; background-color: blue; transition: transform 1s;"></div>
<br>
<style>
div:hover {
transform: rotate(180deg);
}
</style>

在這個例子中，我們創建了一個寬高為100像素、藍色背景的<div>元素，并為其添加了過渡效果。當鼠標懸停在元素上時，我們通過設置transform屬性的rotate值為180度來實現旋轉。由于過渡效果的存在，這個旋轉動作將會平滑地發生，并在一秒鐘內完成。

</div>
<div>

最后，我們來看一個使用動畫關鍵幀實現的例子：

<div style="width: 100px; height: 100px; background-color: green; animation: rotate-animation 2s infinite;"></div>
<br>
<style>
@keyframes rotate-animation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(180deg);
}
}
<br>
  div:hover {
animation-play-state: paused;
}
</style>

在這個案例中，我們創建了一個寬高為100像素、綠色背景的<div>元素，并定義了一個名為rotate-animation的動畫關鍵幀。這個關鍵幀從旋轉0度開始，到旋轉180度結束。我們將這個動畫應用到元素上，并設置它為無限循環播放，并持續2秒鐘。當鼠標懸停在元素上時，通過設置animation-play-state屬性為paused，我們能夠暫停動畫的播放。

</div>
<div>

通過以上幾個案例，我們可以清楚地看到<div>旋轉180度效果的實現方法。無論是直接設置transform屬性的rotate值，還是通過過渡效果或動畫關鍵幀來實現，我們都能夠輕松地給元素添加這個獨特的旋轉效果。

</div>