transition与transform(2d)

transiton为过渡效果，一般与hover配合使用

img{
    positon:relative;
    width:300px;
    height:300px;
    transition:all 0.3s;
}
img:hover{
    width:200px;
    height:200px;
    positon:absolute;
    top:-5px;
}

transform为动画效果，这里记录translate(移动）、rotate（旋转）、scale(缩放）

        translate(x,y)需要包含单位，可以是px,也可以是百分比%

        translateX(x)

        translateY(y)

translate:可以改变元素在页面中的位置，相当于定位，进行位移时，不会影响到其它元素的位置；

对行内标签没有效果；

它的百分比单位是相对于自身元素的translate(50%,50%),所以当布局为父盒子的水平垂直居中时，可以采用此（不用考虑盒子本身的大小）

.father{
    positon:relative;
}
.son{
    positon:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%)
}

transform： rotate(度数）

        rotate里面跟读书，单位为deg

        角度为正时，顺时针，负时，为逆时针；

        默认旋转的中心点时元素的中心点；

        旋转中心点设置：transform-origin:x y;

                注意后面的参数x和y用空格隔开；

                x y默认的转换的中心点时元素的中心点（50% 50%）

                还可以给x y设置像素或者方位名词（top bottom left right center)

div{
    width:200px;
    height:200px;
    background-color:red;
    margin:100px auto;
    transition:all 1s;
    /*1.可以跟方位名称*/
    transform-origin:left bottom;
    /*2.默认的时50% 50% 等价于 center center*/
    /*3.可以是px像素*/
    transform-origin:50px 50px;
}
div:hover{
    transform:rotate(360deg);
}

div{
    overflow: hidden;
    width: 200px;
    height: 200px;
    border:1px solid #ccc;
    margin:100px auto;
}
div::before{
    content:'';
    display: block;
    width: 100%;
    height: 100%;
    background-color: hotpink;
    transform: rotate(180deg);
    transform-origin: left bottom;
    transition: all 0.4s;
}
/*鼠标经过div里面的beform复原*/
div:hover::before{
    transform:rotate(0deg);
}

transform： scale(x,y）

注意：x和y用逗号分隔，x和y分别表示放大缩小的倍数，大于1放大，小于1缩小

           如果里面只写一个参数，表示第二个参数和第一个参数一样，scale(2)==scale(2,2)

           优势：可以设置转换中心点缩放，默认以中心点缩放；

                      不影响其它盒子。

div{
    width: 200px;
    height: 200px;
    background-color: hotpink;
    margin:100px auto;
    transition: all 0.4s;
    /*transform-origin: left bottom;*/
    /*transform-origin: center;默认*/
}

/*鼠标经过div里面的beform复原*/
div:hover{
    /*1.里面写的数字不跟单位，就是倍数的意思，2就是2倍*/
    /*transform:scale(x,y);*/
    /*2.宽度为原来的2倍，高度不变*/
    transform:scale(2,1);
    /*3.等比缩放 同时修改宽度和高度，*/
    transform:scale(2);
    /*4.小于1为缩小*/
    transform:scale(0.5,0.5);
    /*5.不会影响其它盒子，可以设置中心点，中心点在原盒子设置，如果是之前直接写宽高变化，
    会影响其它盒子，且不是中心点放大缩小*/
    transform:scale(2);
}

综合写法：transform:translate() rotate() scale()...

       其顺序会影响转换的效果。（先旋转会改变坐标轴方向）

        注意：当我们同时有位移和其它属性的时候，记得要将位移放到最前面。