作為乙個前端從業人員，相信大家對z-index都不陌生，那麼在乙個平面的世界裡，怎麼理解z-index這個屬性。
在理解z-index的時候，我們首先要清楚，乙個頁面是怎樣構建座標軸的，以電腦屏左上角為起點，水平方向從左往右為x軸正向，垂直方向從上往下為y軸正向，螢幕從裡往外為z軸正向，這樣就形成了我們便於理解的三維結構。
對於定位元素，z-index才會起作用；z-index的值預設為 0 ，即都處於html機構層之上，同一布局層【元素巢狀深度】，後面定位元素會壓在前面元素之上。
那麼我們在開發過程中如何直觀的看到這樣的布局，那就要用到網頁元素3d效果展示，，所幸，firefox為我們提供了這麼乙個好的外掛程式，方便我們進行**。
4.7之前的版本，開啟除錯工具，工具欄裡找到3d展示，打鉤。
parallax視差網頁製造3d效果
前幾天看到parallax視差網頁的例子 感覺非常有意思，就了解了一下，發現實現起來還是很簡單的,原文解釋在這個鏈結裡 基本的概念就是設定好幾個背景，當使用者滾動頁面的時候，這幾個背景的滾動速度稍微不同，這樣就造成3d的效果。foreground ballons landscape parallax...
3D效果 perspective屬性
css3中的transform可以做2d操作，當然也有3d操作。3d效果的顯示在於父元素必須有乙個perspective屬性。例如 perspective屬性可以定義3d視覺的角度，可以使子元素顯示3d特效。perspectice視距，表示視點距離螢幕的長短，視點，用於模擬透視效果時人眼的位置 pe...
3d相簿彈出效果02
在3d 相簿基本的布局完成之後，接下來需要完成的是滑鼠拖拽的效果。描述 滑鼠向右移動，整個相簿跟隨滑鼠旋轉，向下移動時，整個相簿的視角向下傾斜。主要涉及到滑鼠按下，移動和抬起三個事件 滑鼠按下事件 document mousedown function e 滑鼠移動事件 this mousemove...