轉換

                                           轉換
一，轉換定義：
   1，可以改變元素的形狀，尺寸，位置
   2，轉換分兩種：
    2D轉換：只能在X，Y軸發生改變：
    例子：旋轉(rotate)、拉伸(scale)、平移(move)、傾斜(skew)
    3D轉換：除了X，Y軸之外還能Z軸變化。
    如：空間旋轉。。。
二，轉換屬性（transform：使用2D，3D）：
    1，提示：
    目前瀏覽器並非徹底支持全部的Transform ，IE九、Firefox 和Opera 僅支持2D transforms ，相應的CSS定義爲：-ms-transform 、-moz-transform 和-o-transform ，而Safari 和Chrome 都支持2D和3D transforms ，相應的CSS定義爲：-webkit-transform 。
    2，取值：
    transform: none（默認值，表示元素不進行轉換）
    transform-functions（表示一個或者多個轉換函數，中間以空格分開）:
       解釋：CSS3變形是一些效果的集合，好比平移、旋轉、縮放和傾斜效果，每一個效果都被稱做爲變形函數（Transform Function）
    寫法：
    transform：: rotate(angle) scale(x,y)／（0〜1的值）skewX(angle) translate(x,y);
    3,transform-origin()屬性:
      1),默認狀況，變形的原點在元素的中心點;
       寫法：transform-origin : 數值/百分比/關鍵字（left，right，top，bottom）;
       一個值：表示全部軸的位置
       兩個值：表示 X 軸和 Y 軸
       三個值：表示 X 軸、Y 軸和 Z 軸；
    4，2D位移：
      1）translate(平移) 可取值：數值、百分比，也能夠是負值
      2）scale(縮放) 可取值：默認值爲1，縮小：0 到 1 之間的數值，放大：大於 1 的數值；
      3）rotate(旋轉) 可取值：根據原點，將元素按照順時針旋轉給定的角度
      容許負值，元素將逆時針旋轉
      4）skew(傾斜)  可取值；以原點位置，圍繞 X 軸和 Y 軸，也能夠按照必定的角度傾斜，可能會改變元素的形狀
    5，transform-style屬性也是3D效果中常常使用的，
      1）flat值爲默認值，表示全部子元素在2D平面呈現。preserve-3d表示全部子元素在3D空間中呈現。

      2）若是對一個元素設置了transform-style的值爲flat，則該元素的全部子元素都將被平展到該元素的2D平面中進行呈現。沿着X軸或Y軸方向旋轉該元素將致使位於正或負Z軸位置的子元素顯示在該元素的平面上，而不是它的前面或者後面。若是對一個元素設置了transform-style的值爲preserve-3d，它表示不執行平展操做，他的全部子元素位於3D空間aa中。
      transform-style屬性須要設置在父元素中，而且高於任何嵌套的變形元素。
       Demo：
       HTML：
       <div class="wrap">
       <div class="spin">
        <div class="rotate">
            <img src="3d-distance.jpg" alt="" width="142" height="200" />
        </div>
        </div>
        </div>
        <div class="wrap">
        <div class="spin">
        <div class="rotate three-d">
            <img src="3d_axes.png" alt="" width="142" height="200" />
        </div>
        </div>
        </div>
        CSS：
        .wrap {
        width: 500px;
        height: 300px;
        margin: 30px auto;
        position: relative;
        background: url(68.jpg) no-repeat center center;
        background-size: 100% 100%;
        }

        .spin {
        width: 142px;
        height: 200px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -72px;
        margin-top: -101px;
        border: 1px dashed orange;
        cursor: pointer;
        transform-style: preserve-3d;
        }

        .rotate {
        background: url(images/cardKingClub.png) no-repeat center;
        background-size: 100% 100%;
        border: 5px solid hsla(50,50%,50%,.9);
        transform: perspective(200px) rotateY(45deg);
        }
       .rotate img{
        border: 1px solid green;
        transform: rotateX(15deg) translateZ(10px);
        transform-origin: 0 0 40px;
        }
        /*改變transform-style的默認值*/
        .three-d {

        transform-style: preserve-3d;
        }

    
    6，3D轉換
       1）perspective 屬性（中文意思是：透視，視角）
       perspective屬性設置鏡頭到元素平面的距離。全部元素都是放置在z=0的平面上。好比perspective(300px)表示，鏡頭距離元素表面的位置是300像素。
       2）特色：
         a，爲元素定義 perspective 屬性時，其子元素會得到透視效果，而不是元素自己
         b，隻影響 3D 轉換元素
        注意點；默認是3D效果不明顯？這是由於鏡頭離平面太遠了，因此旋轉效果不明顯。試試perspective屬性。設置perspect=400px。
       3）3D 位移主要包含
          translateZ(z)
          translate3d(x,y,z)
          解釋：對於沒有rotateX以及rotateY的元素，translateZ的功能就是讓元素在本身的眼前或近或遠（結合黑板上的圖）；
       4）3D 旋轉主要包含
          rotateX(deg)
          rotateY(deg)
          rotateZ(deg)
          rotate3d(x,y,z,deg)
       5）3D 縮放主要包含
          scaleZ(z)
          scale3d(x,y,z)
        demo：
        HTML：
        <section id="darkblue" class="container">
        <div class="box"></div>
        </section>
        CSS：
        .container {
        width: 200px;
        height: 200px;
        margin-bottom: 50px;
        border: 1px solid gray;
        }
       .box {
       width: 100%;
       height: 100%;
       opacity: .75;
       }
       #darkblue {
       perspective: 600px;
       }
       #darkblue .box {
       background-color: darkblue;
       transform: translateZ(50px);
       }a