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

fizz 發布于2019-08-29 11:04 / 1653人閱讀

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

項目地址：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哦~

GPU云服務器云服務器 asp翻書效果代碼這種效果怎么實現實現放大鏡效果 java實現濾鏡效果

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111399.html

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

摘要：的三維元素比正常大，而時則比正常小，大小程度由該屬性的值決定屬性指定了觀察者與平面的距離，使具有三維位置變換的元素產生透視效果。 showImg(https://segmentfault.com/img/bVzAjp); 項目地址：https://github.com/BUPT-HJM/c...demo地址：https://bupt-hjm.github.io/cs...歡迎大家的st...

xfee 2019-08-01 15:29 評論0 收藏0
SegmentFault 技術周刊 Vol.38 - 神奇的 CSS

摘要：層疊即表示允許以多種方式來描述樣式，一個元素可以被渲染呈現出多種樣式。可以讓屬性的變化過程持續一段時間，而不是立即生效。比如，將元素的顏色從白色改為黑色，通常這個改變是立即生效的，使用后，將按一個曲線速率變化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全稱是 Cascading Style Sheet...

elliott_hu 2019-08-29 13:56 評論0 收藏0
談談常見H5制作方法——視頻與CSS3

摘要：但目前白名單申請途徑已經關閉。目前在安卓有一種同層播放器的解決方案。可解決安卓機自動全屏以及視頻播放完畢會跳出廣告的問題，并且可以實現交互。本文在H5動效的常見制作手法的基礎上，對相印的H5動效制作手法進行了擴展和整理，并結合案例談談怎么將其做得生動。視頻類 1、體驗案例視頻類h5可以帶給用戶動效逼真，流暢的體驗。雖然說制作視頻的難度較大，但是瑕不掩瑜，一支視頻可以盡可能地創造出...

tracy 2019-06-21 16:14 評論0 收藏0