CSS学习笔记-2D转换模块

2D转换模块：
    一、旋转
        1.1格式：
            transform:rotate(45deg);
        1.2含义：
            表示旋转多少度
    二、平移：
        2.1格式：
            transform:translate(100px,-100px);
        2.2含义
            第一个参数：水平方向
            第二个参数：垂直方向
    三、缩放：
        3.1格式
            transform:scale(1.5,1);
        3.2含义·
            第一个参数：水平方向缩放
            第二个参数：垂直方向
        3.3注意点：
            (1）若是取值是1，表明不变；
            (2）若是取值大于1，表明放大；
            (3）若是取值小于1，表明缩小；
            (4）若是水平和垂直都同样，则能够只写一个参数；
    四、注意点：
        4.1    若是须要进行多个转换，那么用空格隔开，如：
            transform:rotate(45deg) translate(100px,0px) scale(1.5,1.5)
        4.2 2D的转换模块会修改元素的坐标系，旋转以后再进行平移将参照新坐标系移动


2D转换模块-形变中心点
    一、默认状况下，全部元素都是以本身的中心点做为参考来进行旋转的，能够经过改变中心点属性来修改他的参考点
    二、格式：
        transform-origin:200px 0px;
        第一个参数：水平方向
        第二个参数：垂直方向
    三、注意点：
        3.1值有三种形式：
            （1）具体像素，如：
                transform-origin:100px 100px;
            （2）百分比，如：
                transform-origin:50% 50%;
            （3）特殊关键字，如：
                transfrom-origin:left top;
        3.2形变中心点不只对旋转有影响，对元素的缩放、倾斜等也有影响，但在企业开发中使用较少


2D转换模块-旋转轴向
    一、默认状况下，全部轴都是围绕Z轴进行旋转
    二、格式：
        2.1围绕Z轴：
            transform:rotateZ(45deg);
        2.2围绕X轴：
            transform:rotateX(45deg);
        2.3围绕Y轴：
            transform:rotateY(45deg);


2D转换模块-透视属性：
    一、透视即近大远小
    二、格式：
        perspective:500px;
    三、取值：
        取值意味着观察物体的距离，值越大越不明显，越小越明显
    四、注意点：
        透视属性必须添加到须要呈现透视效果的元素的上级(父)元素上！


本节专业词语及含义：
    deg(degree):    度、程度
    transform:        转换、变形
    rotate:            旋转
    translate：         平移  
    scale:            缩放、比例
    origin:            原点
    perspective:    透视的