CSS学习笔记_2D转换模块

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


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


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


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


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