使用CSS3實現翻書效果（二）

        原來一直使用QQ直接登錄的博客，今天綁定了一下郵箱，原來的博客全沒了，只好把原來備份的博文重新發了一下，還好只有兩篇~

        昨天把css3實現翻書樣式的效果實現了大半，今天將其主體的樣式全部實現了，下面將進行說明：

        我們仔細觀察書本的樣式發現書本底下是有陰影的，而且陰影可以隨着翻書的動作來移動，書皮的左右兩側也分別有一條封邊，看起來非常真實，這裏主要是使用了元素的after和before屬性，對其進行了實現。

　　首先是靜止的陰影的代碼：

.bottom li:nth-child(1):before{
    content: "";
    width: 4px;
    height: 100%;
    position: absolute;
    top:0;
    left: 100%;
    background-color: #8B8B8C;
    box-shadow: 10px -1px 80px 20px #666;
    -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
    -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
    transform: rotateX(90deg) rotateZ(90deg) translateZ(-100px) translateX(2px) translateY(80px);
}

        這裏可以看到，我們對最底部幾乎不動的書頁的第一頁的before屬性加上了一個外陰影，只是加上外陰影的話它會出現在書頁的左側，所以將其進行了旋轉，轉到了書本的下方，再根據需要進行x軸和y軸的平移最終完成了靜止部分陰影的效果。

        下面是跟隨頁面翻動的左側陰影效果：

.front li:nth-child(1):before{
    content: "";
    width: 4px;
    height: 100%;
    position: absolute;
    top:0;
    left: 100%;
    background-color: #8B8B8C;
    box-shadow: 10px -1px 80px 20px #666;
     -webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
    -moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
    transform: rotateX(90deg) rotateZ(90deg) translateZ(-100px) translateX(2px) translateY(80px);
}

        這段代碼與上面的代碼幾乎一樣，只是before的對象變成了front也就是上本書頁，這樣在翻動時，陰影就會隨之移動。

　　最後是書頁、封皮左右封邊效果的實現：

.cover li:nth-child(1):after {
    content: "";
    width: 4px;
    height: 100%;
    position: absolute;
    top:0;
    left: 0;
    background-color: #8B8B8C;
}
.cover li:nth-child(1):before{
    content: "";
    width: 4px;
    height: 100%;
    position: absolute;
    top:0;
    left: 100%;
    background-color: #8B8B8C;
}

　　對書皮的第一個li設置4個像素的寬度，100%的高度然後分別使用left把他們放到兩邊這樣就輕鬆完成了封邊的效果，這樣使用css3實現書籍樣式就完成了，其他還有一些細節的地方比如鼠標離開書籍合上的動畫，相當於執行一次反操作，我這裏就沒有寫啦~~

　　總結：before和after對於給一個模塊加細節實在是不要太好用，感覺像是物理引擎中給父對象加上一個子節點的感覺，它可以附着在父對象上，跟隨者父對象的DOM操作而移動變化，不用再寫新的DOM。但是也與不好之處，比如在本案例中，如果我們想使書籍打開後，仍能看到封面左側封邊的效果（給front的backface-visibility屬性設置爲hidden，翻過去就看不見了，跟背面剪裁一樣），給before設置效果是無效的，所以還是要靈活使用啦。還有記得使用before,after時一定要加上content，就算沒有內容也得加上，開始我沒有加怎麼試都試不出來效果，最後附上成品的圖片：

效果就是這麼個樣子，我傳到github上啦，有興趣看看哦~

地址（fflippage2是完整版的）：https://github.com/StringKun/Fflippage