<div> 左右翻轉是一種常用的網頁布局技術，可以將頁面中的內容在水平方向上進行交換。通過使用CSS的transform屬性和一些簡單的代碼，我們可以實現<div>元素的左右翻轉效果。下面將通過幾個代碼案例詳細解釋說明這個技術。
第一個案例將展示如何通過CSS的transform屬性實現<div>元素的左右翻轉。代碼如下：

<div class="flip-container">
<div class="flipper">
<div class="front">
<p>This is the front side of the div.</p>
</div>
<div class="back">
<p>This is the back side of the div.</p>
</div>
</div>
</div>
<br>
<style>
.flip-container {
perspective: 1000px;
width: 200px;
height: 100px;
}
<br>
.flipper {
transform-style: preserve-3d;
position: relative;
animation: flip 2s infinite;
}
<br>
@keyframes flip {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(360deg);
}
}
<br>
.front,
.back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
<br>
.front {
background-color: lightblue;
}
<br>
.back {
background-color: lightgreen;
transform: rotateY(180deg);
}
</style>

在上述代碼中，使用了.flip-container類來包裹需要翻轉的<div>元素。通過設置.flipper類的transform屬性來實現翻轉效果。flipper類的animation屬性使整個翻轉過程變得平滑。.front和.back類是翻轉元素的正反面，通過設置不同的背景顏色來區分兩個面。
第二個案例將展示如何通過jQuery實現<div>元素的左右翻轉。代碼如下：

<div class="flip-container" onclick="toggleFlip()">
<div class="flipper" id="flipper">
<div class="front">
<p>This is the front side of the div.</p>
</div>
<div class="back">
<p>This is the back side of the div.</p>
</div>
</div>
</div>
<br>
<script>
function toggleFlip() {
$("#flipper").toggleClass("flipped");
}
</script>
<br>
<style>
.flip-container {
perspective: 1000px;
width: 200px;
height: 100px;
}
<br>
.flipper {
transform-style: preserve-3d;
position: relative;
transition: transform 0.6s;
}
<br>
.flipped {
transform: rotateY(180deg);
}
<br>
.front,
.back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
<br>
.front {
background-color: lightblue;
}
<br>
.back {
background-color: lightgreen;
transform: rotateY(180deg);
}
</style>

在上述代碼中，通過給.flipper元素添加flipped類，利用jQuery的toggleClass()函數來實現翻轉。通過設置.flipper元素的transition屬性和transform屬性來實現翻轉動畫。
通過以上幾個案例的說明，我們可以看到，通過使用CSS的transform屬性和一些簡單的代碼，我們可以實現<div>元素的左右翻轉效果。這種技術在網頁設計中經常被用來創建有趣的交互效果，增強用戶體驗。