3D樣解析

3D樣式詳解

1、什麼是3D？

一、3D是咱們人眼所能看到的立體空間，可是電腦上的3D並非真
正的立體空間，而是經過電腦渲染出來的立體空間，繪畫領域，
透視法則，近大遠小(景深)"perspective"，在瀏覽器中是以Z軸呈現
出來的。

2、3D的使用的方法

一、首先給父級定義一個可視距離(景深)"perspective:1000px"眼睛
看電腦的距離，而後還須要給父級劃定一個3D區域"transform-
style:preserve-3d"專門給父級劃定3D區域，且孫子如下元素沒有效
果，須要從新設置屬性(同上景深);當定義子元素Z軸位置之後，父級可
以關閉perspective(景深)，給子元素添加景深，這樣作的目的是能夠
更好的觀看3D效果。

3、transform中Z軸注意事項

一、Z軸能夠經過rotate(旋轉)改變方向，且正值永遠在旋轉後正面      的那一方，負值永遠在旋轉後的後面。

4、transform中的屬性默認方式

一、transform中的屬性若是沒有指定軸X Y Z軸的話默認是Z軸變化。

box-shadow樣式

1、box-shadow數值與語法

一、語法：
        box-shadow:0 0 0 0 color 陰影顯示方式;
二、x y 模糊距離 模糊大小 顏色(接受負值) 陰影顯示方式默認是
像外擴賽"outset" 內陰影"inset"
三、陰影能夠接受多個值，能夠結合僞元素使用。只寫三個值的時
候，前兩個 X Y 第三個模糊距離。

filter語法與屬性

一、filter:brightness(亮度);支持百分比值(默認100%)，支持數值，
    不支持負值。
二、filter:contrast(對比度);支持百分比值(默認100%)，支持數值，
    不支持負值。
三、filter: blur(模糊程度);只支持像素值，至關於馬賽克。
四、filter: saturate(飽和度);支持百分比值(默認100%)，支持數值。
五、filter: sepia(褐色色階);支持百分比值。