HTML5是一種可以幫助我們更加輕松地開發網頁的技術，其中圖片翻轉的功能可以為我們的網頁增加更生動的效果。下面是一段HTML5的圖片翻轉代碼。

這是一個用HTML5實現的圖片翻轉效果示例：

<div class="flip-container">
<div class="flipper">
<div class="front">
<img src="圖片路徑">
</div>
<div class="back">
<img src="圖片路徑">
</div>
</div>
</div>
<style>
.flip-container {
perspective: 1000px;
}
.flipper {
position: relative;
height: 200px;
width: 200px;
transform-style: preserve-3d;
transition: all 0.5s ease-in-out;
}
.front, .back {
position: absolute;
height: 100%;
width: 100%;
backface-visibility: hidden;
}
.front {
transform: rotateY(0deg);
}
.back {
transform: rotateY(180deg);
}
.flipper:hover {
transform: rotateY(180deg);
}
</style>

首先，我們創建了一個div容器，命名為flip-container。該容器用來包含一個會翻轉的div，該div命名為flipper。flipper包含兩個子div，分別命名為front和back。front用來顯示圖片正面，back用來顯示圖片背面。 然后，在樣式中，我們使用了一些transform屬性來實現翻轉效果。perspective屬性定義了容器內3D元素的透視效果。transform-style屬性指定如何在3D空間中呈現元素。transition屬性定義元素的過渡效果。backface-visibility屬性定義了當元素不面向屏幕時，是否可見。 最后，我們給flipper添加了:hover偽類，當鼠標懸停在該元素上時，觸發翻轉效果。 通過使用HTML5的圖片翻轉代碼，我們可以為網頁添加更多趣味性和吸引力，讓用戶在瀏覽網頁時更加享受。