css3-变形

--------------------------------------------------------------------------------------                                                
                                css3-变形
 
A：
    css变形允许动态的控制元素，可以在屏幕周围移动，缩小或者放大，甚至旋转
    
B：
    css3中 具有x/y函数：    translateX（），translateY（），scaleX（），scaleY（），skewX（），skewY（）
    
    2D变形函数：        translate（），    scale（）， rotate（）
                    translate： 标准css度量单位
                    scale：        0～1之间的十进度值；
                    rotate，skew： 径向度量单位deg
                    matrix：矩阵
 
 
    3D变形函数：        rotateX（），rotateY（），rotate3d（），translateZ（），translate3d（），scaleZ（），scale3d（），matrix3d（）
 
C：
 
    属性：    transform：一组转换函数
            transform-origin： 指定元素的中心点
            transform-origin-z：控制元素三维空间中心点
            transform-style： preserve-3d = 建立一个3D渲染环境
D:---------transform-------------------------------------------------------------------
    用法：    transform： none， | <transform-function> | [<transform-function>]*    可用于内联函数和块元素
    
            transform-function 之间利用空格隔开
 
 
        2D：function：    1.translate（） = 移动元素，根据x，y重新定位元素位置 translateX + translateY
                2.scale（）     = 缩放元素               scaleX + scaleY
                3.rotate（）    = 旋转元素
                4.skew（）      = 倾斜元素               skewX + skewY
                5.matrix（）    = 定义矩阵变形，基于x，y轴坐标重新定位元素位置
 
        
        3D：function：  1.translate3D（）= 移动元素，指定一个3D变形移动位移量
                2.translate（）  = 指定3D位移在Z轴中的位移量
                3.scale3D（）    = 缩放一个元素
                4.scaleZ（）     = 指定Z轴的缩放量
                5.rotate3d（）   = 指定元素具有一个三维旋转的角度
                6.rotateX（），rotateY（），rotateZ（）： 元素具有一个旋转角度
                7.perspective（）= 指定一个透视投影矩阵
                8.matrix3d（）   = 矩阵变形
 
 
E:---------transform-origin-------------------------------------------------------------------
 
    用法：    transform-origin: [<percentage> | <length> | left | center | right | top | bottom]
                    | [[<percentage> | <length> | left | center | right]
                    && [<percentage> | <length> | top | center | bottom] ] <length> ?  
 
        设置一个值：
            transform-origin: x-offset/offset-keyword
 
        设置两个值：
            transform-origin: x-offset/keyword  y-offset/keyword
 
        设置三个值：
            transform-origin: x-offset/keyword   y-offset/keyword   z-offset/keyword
 
        可以为百分比，em,px等,也可以是top，right，bottom，left，center
 
 
            offset：     设置x，y轴偏移量。可以使用length \ percentage值，同时可以是正值负值
            keyword:     top，right之类
            z-offset：    设置3D变形中transform-origin远离用户眼睛视点的距离，默认值为0.可以为length
                
 
    关键词                                                            和        百分比
 
top=top center=center top                                         50% 0%
 
right=right center=center right                                 100% / 100% 50%    
 
bottom=bottom center=center bottom                     50% 100%
 
left=left center=center left                                          0% / 0% 50%
 
center=center center                                                 50% / (50% 50%
 
top left / left top                                                           0% 0%
 
right top/top right                                                        100% 0%
 
bottom right/right bottom                                           100% 100%
 
bottom left=left bottom                                                0% 100%
 
 
E:---------transform-style-------------------------------------------------------------------
        指定嵌套元素在3D空间的呈现
    
    transform-style: flat | perserve-3d
 
        flat:     默认，所有子元素在2D平面呈现
        perserve-3d: 3D平面呈现 （不能防止子元素溢出容器而设置overflow：hidden）
 
perspective： 设置查看者的位置。值越小，用户与3d空间z平面之间的距离越小，3d越明显，0=none=无穷大
    
    perspective： none | <length>
        none: 默认，以无限的角度来看3d物体。
        length： 单位不能为百分比值。
        （perspective（） 用在当前元素，perspective用在舞台元素的共同父元素）
 
perspective-origin：决定perspective的源点角度
    
    perspective-origin： (为了转换子元素变形的深度，
                    perspective-origin必须定义在父元素身上+需要与perspective属性结合使用以便将视点移至元素中心外）
 
        默认center，50% 50%
        第一个值： 指定相对于元素的包含框的x轴上的位置
        第二个值： 指定相对于元素的包含框的Y轴上的位置        
        
backface-visibility： 旋转背面是否可见
    backface-visibility： visible | hidden （可见 / 不可见）
 
 
F：------------------------css2D变形---------------------------------------
    
    translate（）：    将元素按照指定的方向进行移动
        ==translate（tx）  //  translate（tx，ty）
 
            tx：    X轴移动的方向。为正值，元素向X轴右方向移动反之向左
            ty：    y轴移动的方向。为正值，元素向y轴下方向移动反之向上
 
    
    
    scale（）：    根据中心原点对象进行缩放，默认值为1
        ==scale(sx)  // scale(sx,sy);
            
            sx:    x轴缩放方向。值为0.01~0.99之间缩小。 >1.01，x轴放大
            sy:    y轴缩放方向。
            

    rotate（）:    二维空间接受角度值进行旋转 （不改变形状，倾斜）
        ==rotate(a);    //正值：顺时针旋转、、、负值:逆时针旋转


    skew（）：    元素倾斜显示。（不旋转，改变形状）
        ==skew(ax)  // skew(ax,ay);
        

    matrix（）：    矩阵变形
        ==matrix（a，b，c，d，e，f）；
            
            对应矩阵：     a，c，e       计算：    a，c，e  |  x                            ax+cy+e
                                     b，d，f                        b，d，f   |  y        ---->>>        bx+dy+f
                                     0，0，1                       0，0，1 |  1                                 1

        矩阵例子=======：：：
            eg： transform： matrix（1,0,0,1,50,50）；    ->(a=1, b=0, c=0,d=1, e=50, f=50);
                矩阵计算： （偏移元素的中心点： （1,1）)
                    1 0 50 |  1                                          51
                    0 1 50 |  1                      ----1->>>    51                        --2--->>>             （51,51）
                    0 0 1   |  1                                            1
                
        

                    ---3--->>>                          即 （1,1） ->（51,51）   

                   

                                                          此时matrix（1,0,0,1,50,50） = translate（50px，50px）；

        matrix和其他函数的关系：
            matrix（1,0,0,1，tx，ty）    =         translate（tx，ty）
        
            matrix（sx,0,0,sy,0,0）        =      scale(sx,sy)               

            matrix（cos(A),sin(A),-sina(A),cos(A),0,0） =    rotate(a);

            matrix(1, tan(ay) , tan(ax) ,1,0,0)        =   skew(ax,ay);

        镜像：    matrix( (1-k^2)/(1+k^2) , 2k/(1+k^2) , 2k(1+k^2) , (k^2-1)/(1+k^2) , 0,0 )    


        
H：----------------------------------3D变形------------------------------------
    位移：    translateZ()  +    translate3d()
    旋转：    rotateX()     +       rotateY()    +    rotateZ()    +    rotate3d()
    缩放：    scaleZ()    +    scale3d()
    矩阵：    matrix3d()

        
        ==translate3d(tx , ty , tz)
            z轴值不能为一个百分比值
        
        ==translate（t）
            z轴的向量位移长度

        ==scale（sx，sy，sz）    ：需要搭配其他的变形函数
            sx：横向缩放比例    sy：纵向缩放比例    sz：z轴缩放比例    


        ==scaleZ（s）
            指定元素每个点在Z轴的比例


        ==rotateX（a）    rotateY（a）    rotateZ（a）
            
        ==rotate（x，y，z，a）
            x：0~1    描述元素围绕X轴旋转的矢量值
            y：0~1    描述元素围绕Y轴旋转的矢量值
            z：0~1  描述元素围绕z轴旋转的矢量值
            a：角度值。指定元素在3d空间旋转的角度。正值：顺时针旋转，负值：逆时针旋转
        
            rotateX = rotate（1,0,0，a）；
    
        
        ==matrix（sx，0,0,0,0，sy，0,0,0,0，sz，0,0,0,0，1）    透视投影            
                
                矩阵：    sx 0  0  0
                                0  sy 0  0
                                0  0  sz 0
                                 0  0  0  1