3D動畫、陰影，濾鏡
**3D動畫原理：**在平面內建立一個三維座標系，水平向右x正軸，垂直向下y正軸，由平面指向用戶的軸稱爲z軸；
3D動畫必備：
1.perspective:1000px;通過給座標系添加perspective樣式即可增加z軸；
2.z軸的位置可以用perspective樣式來設置
默認位置perspective-origin:50% 50%;(元素的中心位置)
例：0% 0%則是x軸y軸的交點處；與變化原點類似；
3.物體沿z軸移動符合透視法則，物體z軸長度越小用戶在視覺上看到的物體越大；
4.要實現3D效果的元素必須擁有一個父元素，其子元素纔會獲得透視效果，實現3d視覺效果關鍵點是將實現3d效果元素的父元素進行旋轉(即繞x軸y軸旋轉)；
5.當x爲正值時向上旋轉，y爲正值時向右旋轉；
元素通過水平中線和垂直中線的交點確定，在計算中線時元素的margin值也計算在內；
6.父元素中必加兩個屬性：
transform-style:preserve-3d;
perspective:1000px;
元素原點的確定
1.使用絕對定位樣式移動元素時，此時座標系的x軸和y軸以設置裏相對定位的祖先元素的中點爲原點
2.使用transform的位移樣式或是相對定位樣式移動元素時，此時座標系的x軸和y軸以元素的中心爲原點
3.默認情況下，座標系的z軸位於父元素的水平中線與垂直中線的的交界處；
3D切割輪播圖的實現：
原理：就是將四張圖片分別放在多個正方體的四個面上，在每一個正方體的相同的一個面上定位遇上一個盒子連續的圖片，這樣就能實現多個盒子的四個面排列起來後成爲連續的圖片，最後給每個盒子加上動畫效果(盒子之間要有延時)，這樣就能在視覺上表現出輪播效果。
盒陰影
**原理：**通過box-shadow屬性給元素加一個陰影(初始值與元素大小相同)；
默認值：box-shadow:none;
複合寫法：box-shadow:10px 15px 20px 25px yellow inset/outset;
第一個值是陰影的水平距離移動(默認向右移動)—xOffset
第二個值是陰影的垂直距離移動(默認向下移動)–yOffset
第三個值是陰影的模糊距離(作用就是增強陰影邊框的模糊感)—burlLenght
第四個值可以縮放陰影的大小—spread;
第五個值是陰影的顏色設置，默認情況下它的顏色是黑色—color
第六個值是陰影表示模糊感的方向是向內還是向外，在不設置的情況下默認是向外(outset)—outset;
文字陰影
正常文字設置陰影：
text-shadow:none(默認值)；
text-shadow:10px 10px 5px black;同盒陰影的屬性相同；
凹凸文字：
凸文字形成原理：同一文字設置兩組陰影,但兩組陰影顏色不同(右下陰影顏色爲暗色，左上顏色爲亮色)
例：text-shadow:1px 1px 3px black, -1px -1px 3px white;
凹文字形成原理：兩組陰影，(右下顏色亮色，左上顏色爲暗色)
例：text-shadow:1px 1px 3px white,-1px -1px 3px black;
濾鏡樣式：
filter：濾鏡屬性，默認值爲none;
一下是filter的樣式
blur(px):高斯模糊，值越大越模糊；
brightness(%):亮度，默認值是100%，0%會全黑，大於100%會越來越亮；
contrast(%)：對比度，默認值是100%，0%會全灰。大於100%對比度越來越強
drop-shadow(h-shadow v-shadow blur spread color):圖片陰影；filter:drop-shadow(2px 5px 5p);
grayscale(%):灰度，默認值0%，100%會全灰；
hue-rotate(deg):色相旋轉，0deg默認值，沒有最大值，超過360deg,相當於繞一圈
invert(%):反轉輸入圖像，0%默認值，100%完全反轉
opacity(%):透明度，100%默認值，0%完全透明，與opacity很像，不同之處在於通過filter，一些瀏覽器會提供硬件加速；
saturate(%)：飽和度，100%默認值，0%完全不飽和，超過100%，有更高的飽和度；
sepia(%):深褐色，0%默認值，100%完全深褐色；
濾鏡的使用，順序決定結果；