**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%完全深褐色；
濾鏡的使用，順序決定結果；
3D動畫和盒陰影及濾鏡
3d 開闢異次元空間 transform style preserve 3d 視距，透視 perspective npx 盒陰影 必須要有的 h shadow 水平陰影 v shadow 垂直陰影 可以選擇的 blur 模糊距離 spread 陰影尺寸 color 陰影顏色 inset 內陰影 文字...
3D模板陰影原理
1 先從3dsmax中匯出乙個簡單的場景，乙個園環，球，平面。2 園環直接面向光源，園環對球體來說是乙個光線的阻擋物，園環在它上面形成陰影，同時，園環和球體對平面來說是光線的阻擋物，所以，同時在其上面形成陰影。3 要產生模板陰影，先要找出在園環和球體上面面向光線的面，去除背向光線的面，通過測試光線同...
CSS 動畫 3D翻頁動畫
doctype html html lang en head meta charset utf 8 meta name viewport content width device width,initial scale 1.0 title create effect of 3d title styl...