转换

                                           转换
一，转换定义：
   1，能够改变元素的形状，尺寸，位置
   2，转换分两种：
    2D转换：只能在X，Y轴发生改变：
    例子：旋转(rotate)、拉伸(scale)、平移(move)、倾斜(skew)
    3D转换：除了X，Y轴以外还能Z轴变化。
    如：空间旋转。。。
二，转换属性（transform：使用2D，3D）：
    1，提示：
    目前浏览器并不是完全支持所有的Transform ，IE9、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 {
        500px;
        height: 300px;
        margin: 30px auto;
        position: relative;
        background: url(68.jpg) no-repeat center center;
        background-size: 100% 100%;
        }

        .spin {
        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 {
        200px;
        height: 200px;
        margin-bottom: 50px;
        border: 1px solid gray;
        }
       .box {
       100%;
       height: 100%;
       opacity: .75;
       }
       #darkblue {
       perspective: 600px;
       }
       #darkblue .box {
       background-color: darkblue;
       transform: translateZ(50px);
       }a