在對css3語言進行了更深入的學習後，我對於css3構建3d模型有了一些簡單的了解。這是我在逆戰班學習的第五個星期，我希望將自己所學知識總結運用並分享給和我一樣的前端小白，在此做一些簡單的介紹。
由以上示意圖可以看出，翻書模型由封面、內容和封底三部分組成，這三部分皆為帶陰影和圓角的矩形，且封面和封底採用了相同的漸變色，長寬較內容頁稍大。
我們不妨將採用無序列表ul包含多個子元素li來實現這個效果，html結構如下：
>
class
="page"
>
class
="cover-page"
>
li>
class
="inside-page"
>
li>
class
="inside-page"
>
li>
class
="inside-page"
>
li>
class
="inside-page"
>
li>
class
="inside-page"
>
li>
class
="end-page"
>
li>
ul>
body
>
/*給ul新增長寬屬性*/
.page
/*給所有li絕對定位，並新增圓角和陰影*/
.page li
/*給封面頁新增漸變屬性和大小*/
.cover-page
/*給封底頁新增漸變屬性和大小*/
.end-page
/*給內容頁添大小定位以及底色邊框*/
.inside-page
隨後，將各個頁面按不同角度傾斜，使模型產生立體感。需要提醒的是，旋轉軸一定要給左邊框，否則所有頁面將中心翻轉；新增旋轉後一定要給父元素(ul)新增視距和3d旋轉型別，css**如下：
.page
.page li
.page li:nth-of-type(1)
.page li:nth-of-type(2)
.page li:nth-of-type(3)
.page li:nth-of-type(4)
.page li:nth-of-type(5)
.page li:nth-of-type(6)
在滑鼠移入的時候，整個模型中的頁面會依次旋轉展開，而因旋轉的角度和時間不同，則會給人以書本翻閱的效果。
為了頁面內容更加逼真，此處採用了簡易的處理：為頁面新增橫線，模擬一般筆記本的內頁，其中橫線採用div的下邊線來實現，html**如下：
class
="inside-page"
>
>
div>
>
div>
>
div>
>
div>
>
div>
>
div>
>
div>
>
div>
>
div>
>
div>
>
div>
>
div>
>
div>
>
div>
>
div>
li>
css**如下：
/*橫線樣式*/
.inside-page div
css**：
/*滑鼠離開頁面回翻的旋轉時間*/
.page li:nth-of-type(1)
.page li:nth-of-type(2)
.page li:nth-of-type(3)
.page li:nth-of-type(4)
.page li:nth-of-type(5)
.page li:nth-of-type(6)
/*滑鼠懸停時的旋轉角度和旋轉時間*/
.page:hover li:nth-of-type(1)
.page:hover li:nth-of-type(2)
.page:hover li:nth-of-type(3)
.page:hover li:nth-of-type(4)
.page:hover li:nth-of-type(5)
.page:hover li:nth-of-type(6)
CSS3 實現翻書效果
body ulul li一般3d層給實現3d效果的父盒子，視距給最大的盒子body。在給子元素設定旋轉角度過程中，使用偽類選擇器可以減少記憶體的占用，這裡使用到 nth child 偽類。主要css 如下 ul hover li nth child 1 ul hover li nth child 2...
Unity Shader實現翻書效果
這裡就隨便用的一張紋理了，我們還是稱為 翻木板 吧，哈哈。實現過程 其實這個效果實現起來還是挺簡單的，大概思路其實就是讓所有頂點都繞z軸旋轉，並且通過正余弦使之帶有一點弧度。下面開始讓我們一步一步的實現該效果。首先開啟unity新建乙個工程，場景，並且建立乙個名為openbookeffect的sha...
使用CSS3實現翻書效果（二）
原來一直使用qq直接登入的部落格，今天繫結了一下郵箱，原來的部落格全沒了，只好把原來備份的博文重新發了一下，還好只有兩篇 昨天把css3實現翻書樣式的效果實現了大半，今天將其主體的樣式全部實現了，下面將進行說明 我們仔細觀察書本的樣式發現書本底下是有陰影的，而且陰影可以隨著翻書的動作來移動，書皮的左...