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。