css3 transform (deformation) practical example

1--Use transform to achieve centering effect 

<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%);
}

 Let both left and top be 50%, which makes the leftmost div of the div 50% from the leftmost left of the screen in the horizontal direction,

The vertical direction is the same, so that the top of the div is 50% away from the top of the screen.

So use transform to translate to the left (up) by 50% of its own width (height),

It also achieves the centering effect.

2--Use transform to realize the animation effect of zooming and zooming in when the mouse is parked on the picture

 

<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;
}

 transformIt means deformation, including rotation rotate, distortion skew, scaling scale, moving translate, matrix deformation matrix

rotate(xx deg)(2D),  rotateX()(3D),  rotateY()(3D): The center is the base point, degindicating the angle of rotation, and a negative number indicates counterclockwise rotation.

translate(x,y) , translateX(x) , translateY(y): Use the center as the base point to translate the element according to the set parameter value x.y

scale(x,y), scaleX(x,1),  scaleY(1,Y): The scaling base is 1, if the value is greater than 1, the element will be zoomed in, otherwise the value is less than 1, it will be zoomed out.

skew(x,y),  skewX(x),  skewY(y): Take the center as the base point, the first parameter is the twist angle in the horizontal direction, and the second parameter is the twist angle in the vertical direction.

The default base point for all operations is at the center.