概念： 2D 動畫要是使用 transform 屬性來實現文字或圖像的的各種變形效果，如位移、縮放、旋轉、傾斜等 transform屬性變形方法： translate()：位移 將元素沿著水平方向（X軸）和垂直方向（Y軸）移動 translateX(x)：元素僅在水平方向移動（X軸移動） trans ...
概念：
2D 動畫要是使用 transform 屬性來實現文字或圖像的的各種變形效果，如位移、縮放、旋轉、傾斜等
transform屬性變形方法：
translate()：位移
將元素沿著水平方向（X軸）和垂直方向（Y軸）移動
translateX(x)：元素僅在水平方向移動（X軸移動）
translateY(y)：元素僅在垂直方向移動（Y軸移動）
transklate(x,y)：元素在水平方向和垂直方向同時移動（X軸和Y軸同時移動）
scale()：縮放
將元素根據中心原點進行縮放。跟translate()方法一樣
scaleX(x)：元素僅水平方向縮放（X軸縮放）
scaleY(y)：元素僅垂直方向縮放（Y軸縮放）
scale(x,y)：元素水平方向和垂直方向同時縮放（X軸和Y軸同時縮放）
rotate()：旋轉
來將元素相對中心原點進行旋轉。這裡的旋轉是二維的，不涉及三維空間的操作
例如：transform:rotate(30deg);順時針旋轉30度
skew()：傾斜
和translate()方法、scale()使用方法相同
skewX(x)：使元素在水平方向傾斜（X軸傾斜）
skewY(y)：使元素在垂直方向傾斜（Y軸傾斜）
skew(x,y)：使元素在水平方向和垂直方向同時傾斜（X軸和Y軸同時傾斜）
transform-origin：中心原點
transform-origin屬性取值有2種：一種是採用長度值，另外一種是使用關鍵字。長度值一般使用百分比作為單位，很少使用px、em等作為單位
例如：transform-origin:right center;和transform-origin:100% 50%; 均是將原地設置在 右邊中間位置
transform 綜合使用
例如：transform:rotate(30deg) translateX(100px) transform-origin:right center;
示例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style type="text/css"> 9 * {margin: 0; padding: 0} 10 div {width: 100px; height: 100px; background: #f0f; margin: 20px auto;} 11 div:nth-child(1):hover {transform:translateX(200px);} 12 div:nth-child(2):hover {transform:scale(2, 2);} 13 div:nth-child(3):hover {transform:rotate(30deg);} 14 div:nth-child(4):hover {transform:skew(30deg, 30deg);} 15 div:nth-child(5):hover {transform-origin:left center; transform:rotate(-30deg);} 16 div:nth-child(6):hover {transform:translateX(200px) scale(2, 2) skew(30deg, 30deg)} 17 </style> 18 </head> 19 <body> 20 <div>translate()：位移</div> 21 <div>scale()：縮放</div> 22 <div>rotate()：旋轉</div> 23 <div>skew()：傾斜</div> 24 <div>transform-origin：中心原點</div> 25 <div>transform 綜合使用</div> 26 </div> 27 </body> 28 </html>
結果
