css 2d/3d轉換代碼以及案例

2d轉換
      transform 向元素應用 2D 或 3D 轉換。
          rotate(angle) 定義 2D 旋轉，在參數中規定角度。
          scale(x,y) 定義 2D 縮放轉換。 
          translate(x,y) 定義 2D 轉換。 
          matrix(n,n,n,n,n,n) 定義 2D 轉換，使用六個值的矩陣。  
   transform-origin 允許你改變被轉換元素的位置。 
          div
            {
            transform: rotate(45deg);
            transform-origin:20% 40%;
            
            -ms-transform: rotate(45deg);         /* IE 9 */
            -ms-transform-origin:20% 40%;         /* IE 9 */
            
            -webkit-transform: rotate(45deg);    /* Safari 和 Chrome */
            -webkit-transform-origin:20% 40%;    /* Safari 和 Chrome */
            
            -moz-transform: rotate(45deg);        /* Firefox */
            -moz-transform-origin:20% 40%;        /* Firefox */
            
            -o-transform: rotate(45deg);        /* Opera */
            -o-transform-origin:20% 40%;        /* Opera */
            }
             轉換屬性
            下面的表格列出了所有的轉換屬性：
            
            
            transform 向元素應用 2D 或 3D 轉換。  
            transform-origin 允許你改變被轉換元素的位置。  
            transform-style 規定被嵌套元素如何在 3D 空間中顯示。  
            perspective 規定 3D 元素的透視效果。 
            perspective-origin 規定 3D 元素的底部位置。 
            backface-visibility 定義元素在不面對屏幕時是否可見。  
            過度屬性
            transition 簡寫屬性，用於在一個屬性中設置四個過渡屬性。 3 
            transition-property 規定應用過渡的 CSS 屬性的名稱。 
            transition-duration 定義過渡效果花費的時間。默認是 0。
            transition-timing-function 規定過渡效果的時間曲線。默認是 "ease"。
            transition-delay 規定過渡效果何時開始。默認是 0。