How to set the magnification effect of picture by CSS

This article mainly introduces CSS how to set the picture magnification effect, the article introduces in great detail, has a certain reference value, interested friends must read it!

Idea: the animation effect of picture magnification is still realized by transition and transform. First set the initial position of div, transition time, etc., and then set properties such as translate,scale,rotate.

Translate: represents horizontal and vertical movement

Scale: represents horizontal and vertical scaling at the same time

Rotate: represents the angle of rotation.

Specific code:

CSS image enlargement-(yisu.com) div {width: 200px; height: 100px; transition: all .3s;} div:hover {transform: translate (100px, 100px) scale (2) rotate (0deg);}

The above is all the contents of the article "how to set the picture magnification effect in CSS". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!