亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

CSS3 3D transform變換 視差滾動效果學(xué)習(xí)

el09xccxy / 3013人閱讀

摘要：變換視差滾動效果學(xué)習(xí)在學(xué)習(xí)如何做到視差滾動效果時(shí)，閱讀了張鑫旭老師的文章，記錄下學(xué)習(xí)視差滾動變換的幾個(gè)理解點(diǎn)。視差滾動中的計(jì)算，畫一個(gè)草圖即可得知，是舞臺視覺平面抬起向你而來的距離，而是元素后退的距離離你而去，所以

CSS3 3D transform變換 視差滾動效果學(xué)習(xí)

在學(xué)習(xí)css如何做到視差滾動效果時(shí)，閱讀了張鑫旭老師的文章，記錄下學(xué)習(xí)視差滾動 and 3D transform變換的幾個(gè)理解點(diǎn)。

1.復(fù)習(xí)笛卡爾坐標(biāo)系的概念，下面這張圖的Y方向應(yīng)該標(biāo)反了，關(guān)于笛卡爾坐標(biāo)系的知識可以維基下Cartesian coordinates，復(fù)習(xí)下笛卡爾坐標(biāo)系的方向判斷后，rotateX,Y,Z理解起來就非常輕松了。

2.在之后是關(guān)于perspective這個(gè)屬性的內(nèi)容，原文下面的圖開始有些難以理解，兩種書寫方式為什么會造成這樣的差異，這里可以這樣理解：

如果你只給stage設(shè)置了perspective屬性，相當(dāng)于就只有一個(gè)觀看者，而perspective-origin是初始視覺點(diǎn)，默認(rèn)為(50%，50%),即在這個(gè)觀看平面的中央。所以當(dāng)只有一個(gè)觀看者，面對n扇y軸傾斜45°的門，可以自己模擬測試下，每扇門的可視面積是不一樣的。也會存在某一扇門與你轉(zhuǎn)頭看過去的視線角度是平行的，從而“消失”了。

而給子元素也設(shè)置了perspective屬性后，相當(dāng)于每一扇門前都有一個(gè)你，所以每扇門的可視面積是一樣的。


3.視差滾動中scale的計(jì)算，畫一個(gè)草圖即可得知，perspective是舞臺視覺平面抬起（向你而來）的距離，而translateZ是元素后退的距離（離你而去），所以scale = |translateZ|/perspective.

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/116656.html

相關(guān)文章

  • 3D 視差效果

    摘要：前一周敢玩新版端上線，其中原創(chuàng)視頻封面用的就是上圖的效果，下面詳細(xì)說一下怎么實(shí)現(xiàn)起因這個(gè)效果有著相對較好的用戶體驗(yàn)，在的基礎(chǔ)上又有了與用戶交互的體驗(yàn)，仿佛用戶一直在不同角度按壓這張圖片。 showImg(https://segmentfault.com/img/bVG94Y?w=586&h=503); 前一周敢玩新版PC端上線，其中原創(chuàng)視頻封面用的就是上圖的效果，下面詳細(xì)說一下怎么實(shí)現(xiàn)...

    DobbyKim 評論0 收藏0

  • 前端培訓(xùn)-初級階段（5 - 8）

    摘要：前端最基礎(chǔ)的就是。類同于標(biāo)簽將對象作為彈性伸縮盒顯示。定義了一條立方貝塞爾曲線。是，表示終止時(shí)間和終止?fàn)顟B(tài)。動畫過渡可以理解為兩個(gè)關(guān)鍵幀的補(bǔ)間操作。往期前端培訓(xùn)初級階段后記年月日更新。參考資料引用培訓(xùn)目錄出處已備份到筆記速查視差滾動 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTM...

    PAMPANG 評論0 收藏0

  • 前端培訓(xùn)-初級階段（5 - 8）

    摘要：前端最基礎(chǔ)的就是。類同于標(biāo)簽將對象作為彈性伸縮盒顯示。定義了一條立方貝塞爾曲線。是，表示終止時(shí)間和終止?fàn)顟B(tài)。動畫過渡可以理解為兩個(gè)關(guān)鍵幀的補(bǔ)間操作。往期前端培訓(xùn)初級階段后記年月日更新。參考資料引用培訓(xùn)目錄出處已備份到筆記速查視差滾動 前端最基礎(chǔ)的就是 HTML+CSS+Javascript。掌握了這三門技術(shù)就算入門，但也僅僅是入門，現(xiàn)在前端開發(fā)的定義已經(jīng)遠(yuǎn)遠(yuǎn)不止這些。前端小課堂（HTM...

    gaosboy 評論0 收藏0

  • 可能是最全的前端動效庫匯總

    摘要：非常的龐大，而且它是完全為設(shè)計(jì)而生的動效庫。它運(yùn)行于純粹的之上，是目前最強(qiáng)健的動畫資源庫之一。可能是創(chuàng)建滾動特效最好用的工具，它支持大量的瀏覽器，只要它們支持和特性。可以通過安裝吊炸天了，接近現(xiàn)實(shí)生活中的物理運(yùn)動碰撞慣性動畫庫。 收集日期為2019-02-28，★代表當(dāng)時(shí)的該項(xiàng)目在github的star數(shù)量 Animate.css 56401 ★ 一個(gè)跨瀏覽器的動效基礎(chǔ)庫，是許多基礎(chǔ)動...

    afishhhhh 評論0 收藏0

發(fā)表評論

0條評論

el09xccxy

男|高級講師

TA的文章

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