Home > Article > Web Front-end > How to set zoom in css
How to set zoom in css
- 醉折花枝作酒筹Original
- 2021-04-21 17:47:3731556browse
In CSS, you can use the scale() method of the transfrom attribute to set the scaling. The syntax format is "transfrom:scale(direction)". The scale() method is used to modify the size of the element, enlarging or reducing the element through the scaling value defined in vector form, and can set different scaling values in different directions.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
In CSS3, we can use the scale() method of the transform attribute to achieve the scaling effect of elements. Zoom refers to the meaning of "zooming out" and "zooming in".
Syntax:
transform: scaleX(x); /*沿X轴方向缩放*/ transform: scaleY(y); /*沿Y轴方向缩放*/ transform: scale(x, y); /*沿X轴和Y轴同时缩放*/
Description:
There are three situations of scaling: scaleX(), scaleY(), scale(). The parameter x represents the scaling factor of the element in the x-axis direction, and the parameter y represents the scaling factor of the element in the y-axis direction.
When the value of x or y is between 0 and 1, the element is reduced; when the value of x or y is greater than 1, the element is enlarged. If you think about the concept of "multiples", you will understand it soon.
Example: scaleX(x)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*设置原始元素样式*/
#origin
{
width:200px;
height:100px;
border:1px dashed gray;
}
/*设置当前元素样式*/
#current
{
width:200px;
height:100px;
color:white;
background-color: rgb(30, 170, 250);
opacity: 0.6;
transform:scaleX(1.5);
}
</style>
</head>
<body>
<div id="origin">
<div id="current"></div>
</div>
</body>
</html>The browser preview is as shown below.
Analysis:
transform:scaleX(1.5); means that the element is enlarged to 1.5 times its original size in the x-axis direction. If you change 1.5 to 0.5, the element will be reduced to 0.5 times its original size in the x-axis direction. At this time, the preview effect is as shown in the figure below.
In fact, transform:scaleX(1.5); can actually be equivalent to transform:scale(1.5, 0);, friends can test it by themselves.
Example: scaleY(y)
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*设置原始元素样式*/
#origin
{
width:200px;
height:100px;
border:1px dashed gray;
}
/*设置当前元素样式*/
#current
{
width:200px;
height:100px;
color:white;
background-color: rgb(30, 170, 250);
opacity: 0.6;
transform:scaleY(1.5);
}
</style>
</head>
<body>
<div id="origin">
<div id="current"></div>
</div>
</body>
</html>The browser preview is as shown below.
Analysis:
transform:scaleY(1.5); means that the element is enlarged to 1.5 times its original size in the y-axis direction. If you change 1.5 to 0.5, the element will be reduced to 0.5 times its original size in the y-axis direction. At this time, the browser preview effect is as shown in the figure below.
In fact, transform:scaleY(1.5); can actually be equivalent to transform:scale(0, 1.5);, friends can test it by themselves.
Example: scale(x, y)
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*设置原始元素样式*/
#origin
{
width:200px;
height:100px;
border:1px dashed gray;
}
/*设置当前元素样式*/
#current
{
width:200px;
height:100px;
color:white;
background-color: rgb(30, 170, 250);
opacity: 0.6;
transform:scale(1.2, 1.5);
}
</style>
</head>
<body>
<div id="origin">
<div id="current"></div>
</div>
</body>
</html>The browser preview effect is as shown below.
Analysis:
transform:scale(1.2, 1.5); Indicates that the element is enlarged in both the x-axis and y-axis directions at the same time, in the x-axis direction The magnification is 1.2 times of the original, and the y-axis direction is magnified to 1.5 times of the original. In fact, transform:scale(1.2, 1.5); can actually be equivalent to the following code:
transform:scaleX(1.2); transform:scaleY(1.5);
Recommended learning: css video tutorial
The above is the detailed content of How to set zoom in css. For more information, please follow other related articles on the PHP Chinese website!