1 2D轉換

轉換是css3中具有顛覆性的特徵之一，可以實現元素的位移、旋轉、縮放等效果

轉換可以理解為變形

• 移動：translate
• 旋轉：rotate
• 縮放：scale

1.1 2D轉換之移動translate

2D移動是2D轉換裡面的一種功能，可以改變元素在頁面中的位置，類似定位。

語法：

transform:translate(x,y); 或者分開寫
transform:translateX(n);
transform:translateY(n);

重點：

• 定義2D轉換中的移動，沿著X和Y軸移動元素
• translate最大的優點：不會影響到其他元素的位置
• translate中百分比單位是相對於自身元素的translate:(50%,50%);
• 對行內標籤沒有效果

1. 我們translate裡面的引數是可以用%的

2.如果裡面的引數是%移動的距離是 盒子自身的寬度或者高度來對比的

1.2 2D旋轉之rotate

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

語法：

transform:rotate(度數)

重點：

• rotate裡面跟度數，單位是deg比如rotate(45deg)
• 角度為正時，順時針，負時，為逆時針
• 預設旋轉的中心點是元素的中心點

1.3 2D轉換中心點transform-origin

我們可以設定元素的轉換中心點

語法：

transform-origin:x y;

重點：

• 注意後面的引數x和y用空格隔開
• x y 預設轉換的中心點是元素 的中心點（50% 50%）
• 還可以給x y 設定畫素或者方位名詞（top bottom left right center）

1.4 2D轉換之縮放scale

縮放，顧名思義，可以放大和縮小。只要給元素新增上了這個屬性就能控制它放大還是縮小。

語法：

transform:scale(x,y);

注意：

注意其中x和y用逗號分隔

• transform:scale(1,1)：寬和高都放大一倍，相當於沒有放大
• transform:scale(2,2)：寬和高都放大了兩倍
• transform:scale(2)：只寫一個引數，第二個引數則和第一個引數一樣，相當於scale(2,2)
• transform:scale(0.5,0.5)：縮小
• scale縮放最大的優勢：可以設定轉換中心點縮放，預設以中心點縮放的，而且不影響其他盒子

2 動畫

動畫（animation）是CSS3中具有顛覆性的特徵之一，可通過設定多個節點來精確控制一個或一組動畫，常用來實現複雜的動畫效果

相比較過渡，動畫可以實現更多變化，更多控制，連續自動播放等效果。

2.1 動畫的基本使用

製作動畫分為兩步：

1.先定義動畫，

2.再使用（呼叫）動畫

動畫序列

• 0%是動畫的開始，100%是動畫的完成，這樣的規則就是動畫序列。
• 再@keyframes中規定某項css樣式，就能建立由當前樣式逐漸改為新樣式的動畫效果。
• 動畫是使元素從一種樣式逐漸變化為另一種樣式的效果，您可以改變任意多的樣式任意多的次數。
• 請用百分比來規定變化發生的時間，或用關鍵詞“from”和“to”，等同於0%和100%。

      @keyframes move {
        /* 開始狀態 */
        0% {
          transform: translateX(0px);
        }
        /* 結束狀態 */
        100% {
          transform: translateX(1000px);
        }
      }
      div {
        width: 200px;
        height: 200px;
        background-color: pink;
        /* 呼叫動畫 */
        animation-name: move;
        /* 持續時間 */
        animation-duration: 2s;
      }

常用的動畫屬性：

 動畫的簡寫屬性

animation:動畫名稱 持續時間 運動曲線 何時開始 播放次數 是否反方向 動畫起始或者結束的狀態

 打字機效果：

      div {
        overflow: hidden;
        font-size: 20px;
        width: 0px;
        height: 30px;
        background-color: pink;
        animation: w 4s steps(10) forwards;
        white-space: nowrap;
      }
      @keyframes w {
        0% {
          width: 0;
        }
        100% {
          width: 200px;
        }
      }

奔跑的小熊：

      div {
        position: absolute;
        width: 200px;
        height: 100px;
        background: url(/images/bear.png) no-repeat;
        animation: bear 1s steps(8) infinite, move linear 4s forwards;
      }
      body {
        background-color: #ccc;
      }
      @keyframes bear {
        0% {
          background-position: 0 0;
        }
        100% {
          background-position: -1600px 0;
          /* transform: translateX(-50%); */
        }
      }
      @keyframes move {
        0% {
          left: 0;
        }
        100% {
          left: 50%;
        }
      }

3 3D轉換

3.1 三維座標系

三維座標系其實就是指立體空間，立體空間是由3個軸共同組成的。

x軸：水平向右  注意：x右邊是正值，左邊是負值

y軸：垂直向下  注意：y下面是正值，上面是負值

z軸：垂直螢幕  注意：往外面是正值，往裡面是負值

3.2 3D移動translate3d

3D移動在2D移動的基礎上多加了一個可以移動的方向，就是z軸方向

• transform:translateX(100px);僅僅是在x軸上移動
• transform:translateY(100px);僅僅 是在y軸上移動
• transform:translateZ(100px);僅僅是在z軸上移動（注意：translateZ一般用px單位）
• transform:translate3d(x,y,z);其中x、y、z分別指要移動的軸的方向的距離

3.3 透視perspective

 在2D平面產生近大遠小視覺立體，但是隻是效果二維的

• 如果想要在網頁產生3D效果需要透視（理解成3D物體投影在2D平面內）
• 模擬人類的視覺位置，可認為安排一隻眼睛去看
• 透視我們也稱為視距：視距就是人的眼睛到螢幕的距離
• 距離視覺點越近的在電腦平面成像越大，越遠成像越小
• 透視的單位是畫素

3.4 3D旋轉之rotate3d

3D旋轉指可以讓元素在三維平面內沿著x軸，y軸，z軸或者自定義軸進行旋轉

語法：

• transform:rotateX(45deg):沿著x軸正方向旋轉45度
• transform:rotateY(45deg):沿著y軸正方向旋轉45度
• transform:rotateZ(45deg):沿著z軸正方向旋轉45度
• transform:rotate3d(x,y,z,deg):沿著自定義軸旋轉deg為角度（瞭解即可）

3.5 3D呈現transform-style

• 控制子元素是否開啟三維立體環境
• transform-style:flat子元素不開啟3d立體空間，預設的
• transform-style:preserve-3d;子元素開啟立體空間
• 程式碼寫給父級，但是影響的是子盒子
• 這個屬性很重要，後面必用

 3D導航欄案例：

<style>
    *{
      margin: 0;
      padding: 0;
    }
    ul{
      margin: 100px;
    }
    ul li{
      float: left;
      width: 120px;
      height: 35px;
      margin-right: 20px;
      list-style: none;
      perspective: 500px;
    }
    .box{
      position: relative;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      transition: all .5s;
    }
    .front,.bottom{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .front{
      background-color: pink;
      z-index: 1;
      transform: translateZ(17.5px);
    }
    .bottom{
      background-color: purple;
      transform: translateY(17.5px) rotateX(-90deg);
    }
    .box:hover{
      transform: rotateX(90deg);
    }
  </style>
</head>
<body>
  <ul>
    <li>
      <div class='box'>
        <div class='front'>hello</div>
        <div class='bottom'>world</div>
      </div>
    </li>
  </ul>
</body>