HTML左右翻圖是一種常見的網頁效果，可以讓網頁內容更加生動有趣。下面我們來學習如何使用HTML代碼實現左右翻圖效果。

<div class="flip-container">
<div class="flipper">
<div class="front">
<img src="圖片1.jpg" alt="圖片1">
</div>
<div class="back">
<img src="圖片2.jpg" alt="圖片2">
</div>
</div>
</div>

以上是實現HTML左右翻圖的基本代碼，接下來我們來一一解釋每個元素的作用。

首先是<div class="flip-container">，這個 div 元素是翻轉容器，用來包裹整個翻轉的內容。我們可以為其設置寬度和高度，根據需要進行調整。

然后是<div class="flipper">，這個 div 元素是翻轉主體，用來實現翻轉效果。它會將前面的圖片翻轉展示后面的圖片。

接下來是<div class="front">，這個 div 元素是前面的圖片，在翻轉過程中會先被展示。

而<div class="back">則是后面的圖片，在翻轉到一定角度后會被展示。

最后要注意的是，以上代碼需要借助 CSS 代碼才能實現翻轉效果。具體 CSS 代碼可以自行搜索，這里不再贅述。