css3-2d旋转

2d旋转:
    transfrom:转换
    transition:过渡,渐变
    translate:平移
    rotate:旋转
    scale:缩放

    1:平移:
        transform:translate(X,Y)
        transform:translateX(n)
        transform:translateY(n)
        特点:
            1:不会影响其他盒子的位置;(2:可以用于鼠标悬浮时上下平移的动画效果)
            2:x,y可以是%,%单位是相对于自身元素的宽度或高度的%;,用于居中显示
                translate(50%,50%)
            3:对行内标签没有效果
        用法:
            1:动画;
            2:居中显示:
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);

                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -100px;
                margin-top: -100px;

    2:旋转
        1:transform:rotate(45deg);
        2:过渡动画:过渡写在本身上,谁做动画给谁加
            transition: all .5s;
        3:鼠标经过div,里面的内容旋转:
            .last:hover::after {
                transform: rotate(225deg);
            }
        4:设置旋转中心:
            transform-origin:x y;
        5:实现遮挡旋转:(重点)
            1:father:overflow:hidden
            2:son:transform:rotate(90deg)
                  translation:all .3s;
                  transfrom-origin:left bottom;
            3:father:hover son {
                transform:rotate(0deg);
            }
        注意:
            1:默认转换的中心点是元素的中心点(50% , 50%)相当于(center,center);
            2:还可以给x y设置像素或者方位名词(top,buttom,left,right,center);
            3:可以是px,围绕着当前盒子的位置进行旋转;
    3:缩放:
        1:transform:scale(x,y);
        2:transform: scale(1.02);//等比例缩放
        注意:    
            1:>1,放大;<1缩小;
            2:可以有一个参数,可以有两个参数;
        优点:
            1:不会影响其他盒子的位置;
            2:可以设置缩放的中心点;
                transform-origin:x y;

        实战:
            1:仿传智播客官网图片缩放:
                1:father:overflow:hidden
                2:son:transform:scale(1.1);
            2:分页按钮:

    4:2d转换的综合写法:
        同时使用多个转换,其格式为:transform:translate() rotate() scale();
        注意:
            1:顺序会影响其效果;
            2:位移放在最全面;
            3:放大是会影响阴影的大小,所以有阴影时会变大,影响效果