▊什麼是轉換（transform）？
轉換可以理解為變形，可以實現元素的移動（translate）、旋轉（rotate）、縮放（scale）等效果
▍移動（translate）
transform
:translate
(x,y)
;/*總寫*/
transform
:translatex
(n);
transform
:translatey
(n);
/*分開寫也行*/
translate最大的優點：不會影響其他元素的位置百分比寫法是自身元素的百分比：translate:(50%, 50%);對行內標籤無效
▍旋轉（rotate）
transform
:rotate
(度數)
;
正值表示順時針，負值表示逆時針預設旋轉中心是元素的中心點
▍縮放（scale）
transform
:scale
(x, y)
;
transform: scale(0.5);等價於transform: scale(0.5, 0.5);scale縮放的最大優勢：不影響其他元素；可以設定中心點
▍變換中心（transform-origin）
tansform-origin
: x y;
/* 2d轉換中心點 */
預設中心點當然是(50% 50%)
x和y也可以是方位名詞：top bottom left right center
▍綜合性寫法（連寫）
transform
:translate()
rolate()
scale
()...
其順序會影響轉換的效果。比如先旋轉會改變座標軸方向
當同時有位移（translate）和其他屬性的時候，記得將位移放在最前面
▊什麼是動畫（animation）？
可通過多個節點來精確控制乙個或一組動畫，相較於過渡，變化效果更多
▍基本使用
用keyframe(關鍵幀)定義動畫（@keyframes+名字+自定義動序列）
呼叫動畫（animation-name+animation-duration，即名字+持續時間）(必須寫的屬性)
另： 關於動畫序列，from/to等價於0% / 100%
▍動畫屬性
animation-timing-function動畫的速度曲線
ease(預設),linear…
animation-delay動畫延遲多少後開始
0(預設)
animation-iteration-count1(預設),infinite(無限)…
animation-direction動畫下一週期是否反方向
animation-fill-mode動畫結束後的狀態
backwards(預設跳回原處),forwards(保持位置)…
animation-play-state動畫的執行or暫停
running(預設),paused…
即：animation: name duration timing-function delay iteration-count direction fill-mode;
▍補充知識——關於速度曲線
上面提到過animation-timing-function的預設值是ease，還可以取linear；其實還有：
ease加快，在結束前變慢
ease-in動畫以低速開始，加快
ease-out動畫以低速結束，減慢
ease-in-out開始和結束低速，中間快
steps()指定了時間函式中的間隔數量（步長）
steps()就是分幾步完成動畫；有了steps就不要再寫ease和linear了
▊乙個案例
/* 基本思路是： */
/* 1.精靈圖當做乙個div盒子的背景，精靈圖的background-position分步進行移動————hana的貼圖搖動 */
/* 2.div設定為絕對定位（由於沒有有定位的祖先，因此以瀏覽器為基準），利用left做乙個動畫————hana的移動 */
div@keyframes hana
100%
}@keyframes move
100%
}
&lolisaikou
CSS3 CSS3新特性 新增選擇器
屬性選擇器 根據屬性進行選擇。e attr 選擇具有arrt屬性的e元素 e attr val 選擇具有arrt屬性且屬性值等於val的e元素 e attr val 選擇具有arrt屬性 且屬性值以val開頭的e元素 e attr val 選擇具有arrt屬性 且屬性值以val結尾的e元素 e at...
css3新特性 過渡 動畫 2d 3d轉換
過渡 過渡三要素 1.必須要有屬性發生變化 如 width background等 2.必須要告訴系統哪個屬性需要執行過渡效果 transition property width,background 3.必須告訴系統過渡效果的持續時長 transition duration 5s,5s trans...
CSS3的2D轉換和3D轉換
rotate 使用transform元素中的rotate方法，元素順時針旋轉給定的角度。允許負值，元素將逆時針旋轉。transform rotate 11deg ms transform rotate 11deg internet explorer moz transform rotate 11de...