######一、`2D`轉換之`translate`

1.`2D`轉換

-`2D`轉換是改變標籤在二維平面上的位置和形狀 -移動：`translate` -旋轉：`rotate` -縮放：`scale`

2.`translate`語法

-x就是x軸上水平移動 -y就是y軸上水平移動

    ```css
    transform: translate(x, y)
    transform: translateX(n)
    transfrom: translateY(n)
    ```

3.重點知識點

-`2D`的移動主要是指水平、垂直方向上的移動 -`translate`最大的優點就是不影響其他元素的位置 -`translate`中的100%單位，是相對於本身的寬度和高度來進行計算的 -行內標籤沒有效果

4.程式碼演示

```css
div {
  background-color: lightseagreen;
  width: 200px;
  height: 100px;
  /* 平移 */
  /* 水平垂直移動 100px */
  /* transform: translate(100px, 100px); */


  /* 水平移動 100px */
  /* transform: translate(100px, 0) */


  /* 垂直移動 100px */
  /* transform: translate(0, 100px) */


  /* 水平移動 100px */
  /* transform: translateX(100px); 
 
*/


  /* 垂直移動 100px */
  transform: translateY(100px)
}
```

######二、讓一個盒子水平垂直居中

-看程式碼

######三、rotate

>2d旋轉指的是讓元素在2維平面內順時針旋轉或者逆時針旋轉

使用步驟：

1.給元素新增轉換屬性`transform` 2.屬性值為`rotate(角度)`如`transform:rotate(30deg)`順時針方向旋轉**30度**

```css
div{
      transform: rotate(0deg);
}
```

######四、三角

-程式碼演示

######五、設定元素旋轉中心點(transform-origin)

1.`transform-origin`基礎語法

   ```css
   transform-origin: x y;
   ```

2.重要知識點 -注意後面的引數x和y用空格隔開 -xy預設旋轉的中心點是元素的中心(50%50%)，等價於`center``center` -還可以給xy設定畫素或者方位名詞(`top`、`bottom`、`left`、`right`、`center`)

######六、旋轉中心案例

-程式碼演示

######七、`2D`轉換之`scale`

1.`scale`的作用

-用來控制元素的放大與縮小

2.語法

   ```css
   transform: scale(x, y)
   ```

3.知識要點 -注意，x與y之間使用逗號進行分隔 -`transform:scale(1,1)`:寬高都放大一倍，相當於沒有放大 -`transform:scale(2,2)`:寬和高都放大了二倍 -`transform:scale(2)`:如果只寫了一個引數，第二個引數就和第一個引數一致 -`transform:scale(0.5,0.5)`:縮小 -`scale`最大的優勢：可以設定轉換中心點縮放，預設以中心點縮放，而且不影響其他盒子

4.程式碼演示

    ```css
       div:hover {
           /* 注意，數字是倍數的含義，所以不需要加單位 */
           /* transform: scale(2, 2) */
       
           /* 實現等比縮放，同時修改寬與高 */
           /* transform: scale(2) */
       
           /* 小於 1 就等於縮放*/
           transform: scale(0.5, 0.5)
       }
    ```

######八、圖片放大案例

-程式碼演示

######九、分頁按鈕案例

-程式碼演示

######十、`2D`轉換綜合寫法以及順序問題

1.知識要點

-同時使用多個轉換，其格式為`transform:translate()rotate()scale()` -順序會影響到轉換的效果(先旋轉會改變座標軸方向) -但我們同時有位置或者其他屬性的時候，要將位移放到最前面

2.程式碼演示

   ```css
   div:hover {
     transform: translate(200px, 0) rotate(360deg) scale(1.2)
   }
   ```

######十一、動畫(animation)

1.什麼是動畫

-動畫是`CSS3`中最具顛覆性的特徵之一，可通過設定多個節點來精確的控制一個或者一組動畫，從而實現複雜的動畫效果

2.動畫的基本使用 -先定義動畫 -在呼叫定義好的動畫

3.語法格式(定義動畫)

 ```css
   @keyframes 動畫名稱 {
       0% {
           width: 100px;
       }
       100% {
           width: 200px
       }
   }
   ```

4.語法格式(使用動畫)

   ```
   div {
    /* 呼叫動畫 */
       animation-name: 動畫名稱;
        /* 持續時間 */
        animation-duration: 持續時間；
   }
   ```

5.動畫序列

-0%是動畫的開始，100%是動畫的完成，這樣的規則就是動畫序列 -在@keyframs中規定某項CSS樣式，就由建立當前樣式逐漸改為新樣式的動畫效果 -動畫是使元素從一個樣式逐漸變化為另一個樣式的效果，可以改變任意多的樣式任意多的次數 -用百分比來規定變化發生的時間，或用`from`和`to`，等同於0%和100%

6.程式碼演示

   ```css
   <style>
       div {
         width: 100px;
         height: 100px;
         background-color: aquamarine;
         animation-name: move;
         animation-duration: 0.5s;
       }
   
       @keyframes move{
         0% {
           transform: translate(0px)
         }
         100% {
           transform: translate(500px, 0)
         }
       }
     </style>
   ```

######十二、動畫序列

-程式碼演示

######十三、動畫常見屬性

1.常見的屬性

   <img src="images\animationcanshu.png">

2.程式碼演示

```css
   div {
     width: 100px;
     height: 100px;
     background-color: aquamarine;
     /* 動畫名稱 */
     animation-name: move;
     /* 動畫花費時長 */
     animation-duration: 2s;
     /* 動畫速度曲線 */
     animation-timing-function: ease-in-out;
     /* 動畫等待多長時間執行 */
     animation-delay: 2s;
     /* 規定動畫播放次數 infinite: 無限迴圈 */
     animation-iteration-count: infinite;
     /* 是否逆行播放 */
     animation-direction: alternate;
     /* 動畫結束之後的狀態 */
     animation-fill-mode: forwards;
   }
   
   div:hover {
     /* 規定動畫是否暫停或者播放 */
     animation-play-state: paused;
   }
   ```

######十四、動畫簡寫方式

1.動畫簡寫方式

   ```css
   /* animation: 動畫名稱 持續時間 運動曲線 何時開始 播放次數 是否反方向 起始與結束狀態 */
   animation: name duration timing-function delay iteration-count direction fill-mode
   ```

2.知識要點

-簡寫屬性裡面不包含`animation-paly-state` -暫停動畫`animation-paly-state:paused`;經常和滑鼠經過等其他配合使用 -要想動畫走回來，而不是直接調回來：`animation-direction:alternate` -盒子動畫結束後，停在結束位置：`animation-fill-mode:forwards`

3.程式碼演示

   ```css
   animation: move 2s linear 1s infinite alternate forwards;
   ```

######十五、速度曲線細節

1.速度曲線細節 -`animation-timing-function`:規定動畫的速度曲線，預設是`ease` <imgsrc="images\steps.png"> 2.程式碼演示

   ```css
   div {
     width: 0px;
     height: 50px;
     line-height: 50px;
     white-space: nowrap;
     overflow: hidden;
     background-color: aquamarine;
     animation: move 4s steps(24) forwards;
   }
   
   @keyframes move {
     0% {
       width: 0px;
     }
   
     100% {
       width: 480px;
     }
   }
   ```

######十六、奔跑的熊大

1.程式碼演示 ~~~html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background-color: #ccc;
        }      
        div {
            position: absolute;
            width: 200px;
            height: 100px;
            background: url(media/bear.png) no-repeat;
            /* 我們元素可以新增多個動畫， 用逗號分隔 */
            animation: bear .4s steps(8) infinite, move 3s forwards;
        }
        
        @keyframes bear {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -1600px 0;
            }
        }
        
        @keyframes move {
            0% {
                left: 0;
            }
            100% {
                left: 50%;
                /* margin-left: -100px; */
                transform: translateX(-50%);
            }
        }
    </style>
</head>


<body>
    <div></div>
</body>


</html>

~~~