前情提要:本篇文章已經預設你已經徹底了解perspective和translatez的含義與用法，如果尚未了解，我推薦你看css3系列之詳解perspective
如圖所示，紫div和紅div的滾動速度是不同的，比如使用者滾動了300px，但紅div按1:2,只滾動了150px，而紫色div按1:1，滾動了300px。
最終形成了多個div滾動距離不一致，體現了"視差"的效果，簡單的來說，就是視差滾動，它的原理就是滾動速度不一致！
你問這有什麼用？
那麼你可以嘗試訪問這個**
是不是比起普通**多了一層酷炫？想知道如何實現嗎？接下來我們進入part2。
步驟:1.建立乙個容器元素，設定 overflow-y: scroll 使其可以滾動（同時可能需要 overflow-x: hidden）。
2.對於上面的元素, 我們會應用乙個 perspective 值，然後設定 perspective-origin 到 top left, 或者 0 0。
3.對上面元素的子元素應用乙個在 z 軸的變換，然後把它們還原回來以實現視差效果，而沒有影響它們在螢幕上的大小。
這種方案下的css和html:
.container
.parallax-child
這裡把scale設為s，pespcetive->p,translatez->d //注意d一般是負值
那麼有公式s=(p-d)/p,
這個公式怎麼來的?這其實就是乙個簡單的相似三角形
劃紅線的地方的比例就是1:3,那麼你只需要在原來的基礎上放大3就可以讓圖形變回原來的比例,這裡的1就是p，2就是d，那麼很容易發現圖形的縮小比例是p/(p-d)，想放大回來？倒置這個縮小比例即可，我們便得到了s=(p-d)/p
現在我們已經靠scale屬性讓圖形變回了原來的大小,似乎一切都恢復了原狀，但有乙個東西，它變了，便是滾動速度,滾動速度和上面的縮小比例是完全一致的，以如下資料為例
父元素
perspective: 1px;
子元素transform: translatez(-2px) scale(3);
現在讓我們來總結性質:
父元素設定perspective,子元素設定 translatez(-2px),那麼無論是否有scale屬性,
則有
縮小比例=滾動速度比=p/(p-d)ps：如果不設定 translatez,或者 translatez(0)，那麼對應d=0，所以有縮小比例=滾動速度比=(p/p-0)=1:1,即相對於原來的滾動速率不變。
為了方便讀者嘗試，我碼了乙個小小的demo，你可以任意更改屬性來驗證上面的結論！
2333333333333333
performant parallaxing :
[楊耿]css3系列之詳解perspective:
第99天 CSS3中透視perspective
當元素向後移動的時候，透視點與元素所處位置的連線和螢幕的焦點，就是元素在螢幕上的投影。與原來的頭像大小相比變小了。與之前的過程相同，視點與移動後的元素的連線與螢幕的焦點就是在螢幕上的呈現的元素的大小，與元素相比較變大了。上圖擷取的是x 0平面，可以從圖中看到視點對影象高度投影的影響，由於視點原點的變...
基於CSS3的自適應布局技術
前端html 結構 css 表現 這部分，無非是兩大問題，裝飾與布局。裝飾某個widget就算再難，我們也可以用搞定。布局就不是這回事了，別的不說，display inline block有3px bug，定位布局與浮動布局相關的bug也不在10以下，關鍵是用起來非常麻煩，需要許多額外的元素 早些年...
基於原生js和css3實現barrage彈幕效果
執行圖 使用cancas畫板實現。迴圈重新整理和繪製畫板畫素，每一次迴圈更改繪製元素的x座標 核心函式 clearrect x,y,width,height 在給定的矩形內清除指定的畫素 filltext content,x,y 將content內容繪製到指定的 x,y 處 原始碼展示 var ca...