<div>標簽是HTML中的一個常用標簽，用于創建一個容器來包含其他HTML元素。在Web開發中，我們經常會用到<div>來組織和布局網頁中的內容。
<div>反轉180指的是將一個<div>元素在水平方向上進行旋轉180度，使其呈現出上下顛倒的效果。這種效果可以通過CSS中的transform屬性來實現。
下面是幾個代碼案例，詳細解釋和說明了<div>反轉180的效果。
案例一： 假設我們有一個<div>元素，它包含了一張圖片，并且希望將該<div>反轉180度，實現圖片翻轉的效果。我們可以使用CSS的transform屬性來實現這個效果。

<p>
<div style="transform: rotateX(180deg);">
<img src="example.jpg" alt="Example">
</div>
</p>

在上面的代碼中，我們將<div>的transform屬性設置為rotateX(180deg)，表示沿著X軸旋轉180度。這樣，<div>元素中的內容就會上下顛倒顯示了。
案例二： 有時候，我們希望<div>反轉180度后，還能保持原始的寬度和高度。這可以通過設置transform-origin屬性來實現。

<p>
<div style="transform: rotateX(180deg); transform-origin: center;">
<img src="example.jpg" alt="Example">
</div>
</p>

在上面的代碼中，我們通過transform-origin屬性將旋轉的中心點設置為元素的中心。這樣，<div>元素翻轉后的效果會更符合預期，并且保持了原來的寬度和高度。
案例三： 除了沿著X軸進行180度旋轉，我們還可以沿著Y軸進行翻轉，并結合多個transform屬性來實現一些特殊的效果。

<p>
<div style="transform: rotateX(180deg) rotateY(180deg);">
<img src="example.jpg" alt="Example">
</div>
</p>

在上面的代碼中，我們通過在transform屬性中同時設置rotateX和rotateY屬性，將<div>元素同時在X軸和Y軸上進行了180度的旋轉。這樣，<div>元素就會在水平和垂直方向上都呈現反轉180度的效果。
： 通過使用transform屬性，我們可以輕松地實現<div>反轉180度的效果。在實際開發中，這種效果常常用于創建一些獨特的展示，幫助提高用戶體驗和頁面的吸引力。希望本文的案例可以幫助讀者更好地理解和運用這個效果。