1-12. CSS 新增功能與範例再學習 (依需求挑選學習)

transform: none;

transform: rotateX(120deg);

transform: rotateY(130deg);

transform: rotateZ(50deg);

---

由於靜態狀況之下 3D 的變形不易觀察，
所以以下將 3D 的變形結合 animation 動畫，方便觀察。

---

當滑鼠滑入時, 以X軸旋轉360度。

      #b2:hover { animation: testAni1 4s infinite; }

      @keyframes testAni1 {
        100% { transform: rotateX(360deg); }
      }

---

當滑鼠滑入時, 以Y軸旋轉360度。

      #b2:hover { animation: testAni2 4s infinite; }

      @keyframes testAni2 {
        100% { transform: rotateY(360deg); }
      }

---

當滑鼠滑入時, 以Z軸旋轉360度。

      #b2:hover { animation: testAni3 4s infinite; }

      @keyframes testAni3 {
        100% { transform: rotateZ(360deg); }
      }