CSS-2D動畫筆記

時間 2019-12-10

標籤 css 2d 動畫筆記欄目 CSS 简体版

原文原文鏈接

概念：css

　　2D 動畫要是使用 transform 屬性來實現文字或圖像的的各類變形效果，如位移、縮放、旋轉、傾斜等html

　　transform屬性變形方法：動畫

　　　　translate()：位移ui

　　　　　　將元素沿着水平方向（X軸）和垂直方向（Y軸）移動spa

　　　　　　　　translateX(x)：元素僅在水平方向移動（X軸移動）code

　　　　　　　　translateY(y)：元素僅在垂直方向移動（Y軸移動）orm

　　　　　　　　transklate(x,y)：元素在水平方向和垂直方向同時移動（X軸和Y軸同時移動）htm

　　　　scale()：縮放　blog

　　　　　　將元素根據中心原點進行縮放。跟translate()方法同樣it

　　　　　　　　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>

結果

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。