3d
開闢異次元空間
transform-style：preserve-3d;
視距，透視
perspective: npx;
盒陰影
必須要有的
h-shadow 水平陰影
v-shadow 垂直陰影
可以選擇的
blur 模糊距離
spread 陰影尺寸
color 陰影顏色
inset 內陰影
文字陰影
必須要有的
h-shadow 水平陰影
v-shadow 垂直陰影
可以選擇的
blur 模糊距離
color 陰影顏色
濾鏡屬性
亮度
屬性名稱 ：
filter：brightness（%）；
0%全黑，超過100%會越來越亮
該屬性的作用為調整元素當前的亮度，一般來說可以適用於滑鼠懸浮到某元素時的提醒作用
對比度
屬性名稱：
filter：contrast（百分比）；
100%預設，0%全灰，超過100%對比越高
所謂對比度，簡單理解的話就是乙個區域裡面每個顏色都會變得格外顯眼，黑的更黑，白的更白
當元素只有一種顏色時，該屬性看效果和變亮看上去差不多，如果我們給該元素設定乙個背景的話，那就是另一回事了
模糊
屬性名稱：
filter：blur（px）；
高斯模糊，值越大越迷糊,不接受百分比 ；
色調
屬性名稱：灰色色階
filter：grayscale（%）；
100%全灰，0%不變
該屬性的作用較為簡單，就是將乙個顏色複雜的區域改造成乙個只有黑白二色的區域。圓括號裡面的值定義轉換的比例。值為100%則完全轉為灰度影象，值為0%影象無變化。值在0%到100%之間，則是效果的線性乘子。若未設定，值預設是0；
屬性名稱：褐色色階
filter：sepia（%）；
100%完全深褐色，0%不變
該屬性的作用同上，都是將某個區域的顏色進行簡化，該屬性會將乙個顏色豐富的區域變成一種老黑白**效果，讓有一種輕微泛黃的樣子
filter: none;
陰影
filter: drop-shadow(h-shadow v-shadow blur spread color)
注意：webkit,以及一些其他的瀏覽器 不支援第四個長度，如果加了也不會渲染
色相旋轉
filter: hue-rotate（deg）
0deg沒有變化，超過360deg相當於繞了一圈
反傳輸入影象
filter:invert(%)
0%沒有變化，100%完全反轉
透明度
filter：opacity(%)
0%完全透明，100%完全不透明
飽和度
filter：saturate(%)
0%完全不飽和，100%沒有變化，預設值1，超過100%有更高的飽和度
url() xml 檔案，檔案裡設定了svg濾鏡
inherit,從父級繼承
復合寫法，順序會影響結果
015 3D動畫和盒陰影及濾鏡樣式
015 3d動畫和盒陰影及濾鏡樣式 創造3d物體,或是展示乙個物體在三維空間中的運動,基礎條件是創造乙個3維座標系 transform style preserve 3d perspective 只能給父級 允許改變3d元素檢視3d檢視其 子元素 會獲得透視效果 只影響3d轉換元素 perspect...
前端十五課 3D動畫 陰影，濾鏡
3d動畫原理 在平面內建立乙個三維座標系，水平向右x正軸，垂直向下y正軸，由平面指向使用者的軸稱為z軸 3d動畫必備 1.perspective 1000px 通過給座標系新增perspective樣式即可增加z軸 2.z軸的位置可以用perspective樣式來設定 預設位置perspective...
3D模板陰影原理
1 先從3dsmax中匯出乙個簡單的場景，乙個園環，球，平面。2 園環直接面向光源，園環對球體來說是乙個光線的阻擋物，園環在它上面形成陰影，同時，園環和球體對平面來說是光線的阻擋物，所以，同時在其上面形成陰影。3 要產生模板陰影，先要找出在園環和球體上面面向光線的面，去除背向光線的面，通過測試光線同...