CSS學習筆記–3D動畫模組和背景屬性

一、3D動畫模組
 1.什麼是2d和什麼是3d
  2d就是一個平面，只有高度和寬度，沒有厚度
  3d就是一個立體，有高度和寬度，還有厚度

  預設情況下所有的元素都是呈2d展示的

 2.如何讓某個元素呈3d展現
 和透視一樣，想看到某個元素的3d屬性效果：只要給他的父元素新增一個 transform-style：prescrve-3d 即可；

注意點：
1 .只要父元素被拉伸了，子元素也會預設被拉伸；
2.填滿整個網頁設定（比如背景圖片)：background-size:cover;
3.動畫中如果有和預設樣式同名的屬性，會覆蓋預設樣式中同名的屬性
4.在編寫動畫的時候（寫某個屬性需要變化的範圍大小時），固定不變的值寫在前面，需要變化的值寫在後面

二、背景屬性
 1.什麼是背景尺寸屬性
 背景尺寸屬性是CSS3中新增的一個屬性，專門用於設定背景圖片的大小。

 具體畫素： background-size: 100px 200px;(可能會變形)
 百分比：background-size: 50% 80%（會變形）
 等比拉伸：background-size: auto 100px;（不變形） ，設定寬/高，則另一個設為自動，這樣就不變形

2.其他背景相關的屬性
（1）background-size: cover;
 cover的含義
 1、告訴系統圖片需要等比拉伸
 2、圖片需要拉伸到寬度和高度都要填滿元素

（2）background-size: contain;
 contain的含義
 1.告訴系統圖片需要等比拉伸
 2.告訴系統寬度或

（3）告訴系統背景圖片從什麼區域開始顯示，預設情況下是從padding區域開始顯示；
 Backgroun-origin: padding-box;
 Background-origin: boder-box;
 Background-origin: content-box; (即從內容區域開始顯示)

（4）背景繪製區域屬性是專門用於指定從哪個區域開始繪製背景的，預設情況下會從boder區域開始繪製背景；
  Background-clip: padding-box;;
 Background-clip: boder-box;
 Background-clip: content-box; (即從內容區域開始繪製)

（5）多張背景圖片用逗號隔開，先寫的背景會蓋住後寫的背景；
 多張背景推薦拆開編寫（即，屬性型別拆開寫，不寫成簡寫格式）：
 background-image: url(), url();
 background-repeat: no-repeat, no-repeat;
 background-position: left top, right top;
 
 
 

===筆記內容來自於《從零玩轉HTML5前端+跨平臺開發》