一個純CSS3實現的酷炫翻書效果

項目地址：https://github.com/BUPT-HJM/c...
demo地址：https://bupt-hjm.github.io/cs...
歡迎你們的star啦~

效果細節

其實項目中的關鍵在於幾個屬性，perspective和rotate,即是透視和旋轉

perspective

屬性指定了觀察者與z=0平面的距離，使具備三維位置變換的元素產生透視效果。z>0的三維元素比正常大，而z<0時則比正常小，大小程度由該屬性的值決定

body {
            /*perspective 屬性指定了觀察者與z=0平面的距離，使具備三維位置變換的元素產生透視效果。z>0的三維元素比正常大，而z<0時則比正常小，大小程度由該屬性的值決定。默認狀況下，消失點位於元素的中心，可是能夠經過設置perspective-origin屬性來改變其位置。*/
            -webkit-perspective: 1000px;
            -moz-perspective: 1000px;
            -ms-perspective: 1000px;
            perspective: 1000px;
            background-color: #212121;
            font-family: '微軟雅黑';
        }

preserve-3d

transform-style屬性指定了，該元素的子元素是（看起來）位於三維空間內，仍是在該元素所在的平面內被扁平化。

.preserve-3d {
            /*transform-style屬性指定了，該元素的子元素是（看起來）位於三維空間內，仍是在該元素所在的平面內被扁平化。*/
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }

rotate

在這個效果中rotate起到了很重要的做用，特別是rotateY，沿着Y軸翻轉，你所看到的書本的翻頁，即是用animation的@keyframe動畫實現rotateY的變化,實現翻頁效果跟，也要注意到與transform-origin的配合，由於它是旋轉軸，尤爲關鍵。

歡迎踩踏github，給star啦~

其餘即是css的佈局與html的配合了，想要了解詳細的能夠去github看源碼學習，歡迎指正，記得給star哦~