1、 過渡 transitions
使乙個樣式逐漸過渡到另乙個樣式。
語法:transitons:property(初始形狀) duration(持續時間) timing-function(過渡時間曲線) delay(滑鼠上去馬上過渡);
a. 屬性名稱
b. 定義過渡時所需的時間
c. linear（相同速度）,ease(慢速)，ease-in（慢速），wase-our（緩入），ease-in-out（緩出）
2、 變形transform
2d轉換（旋轉）和3d轉換
旋轉rotate（46deg）
傾斜skew（x軸度數，y軸度數）
縮放scale（x，y）<1縮小，>1放大，
移動語法：transform：none|transform-functions;
a. 預設值為none，適用於內聯元素和塊元素，表示不進行變形。
b. 轉換函式，可以設定以乙個或多個
例子：過渡效果：.share1 img
變形:.share1 img:hover放大0.5倍
3、 元素變形原點
元素的變形都有乙個原點，元素圍繞著這個點進行變形或旋轉，預設的起始位置時元素的中心位置。
.box:hover img:nth-child(5)第五個孩子。
建立乙個盒子 transform-origin屬性，指定元素變形基於的原點 語法：transform-origin：x-axis y-axis z-axis；transform-origin最多接受3個值，分別時x軸、y軸、z軸的偏移量。 a. left ; center ; right ; length , %. b. top ; center ; bottom ; length ; %. c. length.
3d轉換
某個元素繞xyz軸進行旋轉，
perspection,
.cube>div:子代選擇器，選擇cube選擇器下的第一級選擇器
3d導航轉換
3D轉換（位置） 過渡 透視
效果如圖 實現 1.html 2.css 設定父元素 door設定子元素 in3.滑鼠點選時 door hover in完整 注意 1.父元素設定為相對定位，子元素設定為絕對定位。perspective 透視 屬性設定在父元素上，才可對子元素起作用。2.需要給誰設定3d轉換，那滑鼠點選事件就把過渡屬...
css3的過渡動畫和2d變換筆記
1.過渡 transition property 指定過渡動畫的屬性 並不是所有的屬性都可以動畫 transition duration 指定的屬性多餘動畫指定的多個時間時，動畫時間列表會複製 少了會裁剪 指定過渡動畫的時間 0也要帶單位 transition timing function 指定過...
css3的2D和3D效果
2d效果 1.css3過渡，讓動畫更柔和，transition ie10 firefox chrome opera支援，chrome25以及更早版本safari需要新增 webkit transition width 0.5s ease 1s delay transition all 0.5s 常用...