css3 transform（变形） 实战示例

1--利用transform实现居中效果 

<div class="center">
        ....
</div>

.center{
    text-align: center;
    background-color: #fff;
    border-radius: 20px;
    width: 300px;
    height: 350px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

 让left和top都是50%，这在水平方向上让div的最左与屏幕的最左相距50%，

垂直方向上一样，让div的top与屏幕的top相距50%。

所以再用transform向左（上）平移它自己宽度（高度）的50%，

也就达到居中效果了。

2--利用transform 实现鼠标停放在图片上有种缩放 放大的动画效果

<el-image 
    fit="cover" 
    :src="weixin" 
    :lazy="true" 
    style="width:32px;height:32px;" 
    class="header-icon"
/>

.header-icon {
    cursor: pointer;

    backface-visibility: hidden;
    transform: translateZ(0);
    transition: transform 0.25s ease-out;
}
.header-icon:hover {
    transform: scale(1.2);
    color: #60D4E7;
}

 transform是变形的意思，有 旋转rotate、扭曲skew、缩放scale、移动translate、矩阵变形matrix

rotate(xx deg)(2D), rotateX()(3D), rotateY()(3D)：以中心为基点，deg表示旋转的角度，为负数时表示逆时针旋转。

translate(x,y) ，translateX(x) ，translateY(y)：以中心为基点按照设定的x,y参数值,对元素进行进行平移。

scale(x,y)，scaleX(x,1)， scaleY(1,Y)：缩放基数为1，如果其值大于1元素就放大，反之其值小于1为缩小。

skew(x,y)， skewX(x)， skewY(y)：以中心为基点，第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度。

所有操作的默认的基点都在中心位置。