WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞

1-12. CSS 範例再練習 (依需求挑選學習)

CSS3 transform 3D變形

版本 屬性 說明
3 transform 以元素物件中央定位加以變形。 參考【英文版】 【英文版】 【簡中版】 【簡中版

針對藍色區塊測試各種3D變形

transform


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

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


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

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


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

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

 

 

go TOP