国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

一個(gè)純CSS3實(shí)現(xiàn)的酷炫翻書效果

fizz / 1669人閱讀

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

項(xiàng)目地址：https://github.com/BUPT-HJM/c...
demo地址：https://bupt-hjm.github.io/cs...
歡迎大家的star啦~

效果細(xì)節(jié) 
其實(shí)項(xiàng)目中的關(guān)鍵在于幾個(gè)屬性，perspective和rotate,便是透視和旋轉(zhuǎn)
perspective 
屬性指定了觀察者與z=0平面的距離，使具有三維位置變換的元素產(chǎn)生透視效果。z>0的三維元素比正常大，而z<0時(shí)則比正常小，大小程度由該屬性的值決定
body {
            /*perspective 屬性指定了觀察者與z=0平面的距離，使具有三維位置變換的元素產(chǎn)生透視效果。z>0的三維元素比正常大，而z<0時(shí)則比正常小，大小程度由該屬性的值決定。默認(rèn)情況下，消失點(diǎn)位于元素的中心，但是可以通過設(shè)置perspective-origin屬性來改變其位置。*/
            -webkit-perspective: 1000px;
            -moz-perspective: 1000px;
            -ms-perspective: 1000px;
            perspective: 1000px;
            background-color: #212121;
            font-family: "微軟雅黑";
        }
preserve-3d 
transform-style屬性指定了，該元素的子元素是（看起來）位于三維空間內(nèi)，還是在該元素所在的平面內(nèi)被扁平化。
.preserve-3d {
            /*transform-style屬性指定了，該元素的子元素是（看起來）位于三維空間內(nèi)，還是在該元素所在的平面內(nèi)被扁平化。*/
            -webkit-transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }
rotate 
在這個(gè)效果中rotate起到了很重要的作用，特別是rotateY，沿著Y軸翻轉(zhuǎn)，你所看到的書本的翻頁，便是用animation的@keyframe動畫實(shí)現(xiàn)rotateY的變化,實(shí)現(xiàn)翻頁效果跟，也要注意到與transform-origin的配合，因?yàn)樗切D(zhuǎn)軸，尤其關(guān)鍵。
歡迎踩踏github，給star啦~ 
其他便是css的布局與html的配合了，想要了解詳細(xì)的可以去github看源碼學(xué)習(xí)，歡迎指正，記得給star哦~

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/111399.html

相關(guān)文章

  • 一個(gè)純CSS3實(shí)現(xiàn)的酷炫翻書效果

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

    xfee 評論0 收藏0

  • SegmentFault 技術(shù)周刊 Vol.38 - 神奇的 CSS

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

    elliott_hu 評論0 收藏0

  • 談?wù)劤Ｒ奌5制作方法——視頻與CSS3

    摘要：但目前白名單申請途徑已經(jīng)關(guān)閉。目前在安卓有一種同層播放器的解決方案。可解決安卓機(jī)自動全屏以及視頻播放完畢會跳出廣告的問題，并且可以實(shí)現(xiàn)交互。 本文在H5動效的常見制作手法的基礎(chǔ)上，對相印的H5動效制作手法進(jìn)行了擴(kuò)展和整理，并結(jié)合案例談?wù)勗趺磳⑵渥龅蒙鷦印?視頻類 1、體驗(yàn)案例 視頻類h5可以帶給用戶動效逼真，流暢的體驗(yàn)。雖然說制作視頻的難度較大，但是瑕不掩瑜，一支視頻可以盡可能地創(chuàng)造出...

    tracy 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<