近年來，人們對于手機翻書效果越來越感興趣，而HTML也為此提供了許多實現的方式。現在，我們來學習一種簡單的HTML手機翻書效果代碼。

<style>
.book {
perspective: 800px;
-webkit-perspective: 800px;
}
.page {
position: absolute;
width: 100%;
height: 100%;
padding: 20px;
background-color: #fff;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transition: transform 1s ease-in-out;
-webkit-transition: -webkit-transform 1s ease-in-out;
}
.book .page:last-child {
transform-origin: right center;
-webkit-transform-origin: right center;
}
.book .page:first-child {
transform-origin: left center;
-webkit-transform-origin: left center;
}
.book:hover .page:first-child {
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
}
.book:hover .page:last-child {
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
</style>

這是一段基于CSS 3D轉換的代碼，通過translate3D()、rotate3D()、scale3D()等函數，我們可以以瀏覽器中的三維坐標系的形式進行頁面的旋轉、平移和縮放。此外，我們還使用了transition屬性和內置的3D特性backface-visibility，來實現更加平滑的頁面效果。

有了CSS的基礎后，我們就可以在HTML中構建翻書的效果了。

<div class="book">
<div class="page">
<p>這是第一頁</p>
</div>
<div class="page">
<p>這是第二頁</p>
</div>
</div>

這樣，一個簡單的翻書效果就完成了。我們可以繼續通過增加新頁面、調整轉換方式等等，來實現更加生動的效果。