How to enlarge the picture with CSS3

This article mainly explains "how to use CSS3 to achieve the magnification effect of the picture", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "how to use CSS3 to achieve the magnification effect of the picture" bar!

Methods: 1, the use of transform attributes with scale () method, the syntax is "transform:scale (x-axis magnification, y-axis magnification);"; 2, the use of width and height properties, the syntax is "width: magnified width; height: magnified height;"

The operating environment of this tutorial: windows10 system, CSS3&&HTML5 version, Dell G3 computer.

How to enlarge the picture with CSS3

Method 1, use transform attribute with scale () method

The transform attribute applies a 2D or 3D transformation to the element. This attribute allows us to rotate, scale, move, or tilt the element.

Scale (XBI y) defines 2D scaling transformations.

Examples are as follows:

Document * {margin:0 auto;} .img1 {background:pink; transform:scale (1.5);}

Output result:

Method 2, use width and height attributes

Two attributes are used to set the width and height of the element, respectively.

Examples are as follows

Document * {margin:0 auto;} .img1 {width:300px; height:200px;}

Output result:

Thank you for reading, the above is the content of "how to use CSS3 to achieve the magnification effect of the picture", after the study of this article, I believe you have a deeper understanding of how to use CSS3 to achieve the magnification effect of the picture, the specific use of the situation also needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!