3D動畫以及盒陰影盒濾鏡

3D

$[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-HnQvDH1P-1583129896769)(C:\Users\dell\Desktop\我的博客\QQ截圖20200302140839.png)]$

content3 {
transform:rotateX(45deg);
}

$[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-DmQaUtjJ-1583129896770)(C:\Users\dell\Desktop\我的博客\QQ截圖20200302140948.png)]$

通過給座標系添加perspective樣式即可增加Z軸

默認情況下，座標系的Z軸位於父元素的水平中線與垂直中線的交界處

z軸的位置可以用perspective-origin樣式來設置

默認位置爲perspective-origin:50% 50%;
與變化原點類似

box-shadow：xOffset yOffset burlLehgth spread color outset;
盒陰影:水平方向偏移垂直方向偏移陰影模糊距離陰影縮放陰影顏色陰影顯示方式；

$[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Bkh8cN28-1583129896772)(C:\Users\dell\Desktop\我的博客\圖片1.png)]$

看似沒有任何效果，原因其實很簡單，因爲此時影子的大小與元素一致，而且沒有給影子設置偏移，那麼以用戶的從上往下看的視角來看，元素的影子全部都被元素本身給遮擋住了

box-shadow：0px 0px 0 0 blue outset;
盒陰影:水平方向不偏移垂直方向不偏移陰影模糊距離爲0 陰影縮放爲0 陰影顏色爲藍色外部顯示陰影

box-shadow:100px 100px 0 0 blue outset;
盒陰影:水平方向向右偏移100px 垂直方向向下偏移100px 陰影模糊距離爲0 陰影縮放爲0 陰影顏色爲藍色外部顯示陰影

縮放：

color:盒陰影的顏色
這個值最好理解，就是影子的顏色，此處顏色可設置漸變色、英語單詞、rgb、rgba、十六進制等，作用就是改變影子的顏色

inset:盒陰影的顯示方式
gb、rgba、十六進制等，作用就是改變影子的顏色

inset:盒陰影的顯示方式
默認情況下值爲outset，影子在元素的下面，就如同一開始介紹的盒陰影模型一般，但是如果給盒陰影加上inset，則影子的顯示就如同在元素的邊緣向內部蔓延一般，此時影子的大小會遮蓋部分元素的內容

見資源

發表評論

所有評論

還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.