Article directory
1. Use scale to set the zoom
In the 2D transformation in CSS3, you can use the scale style to set the scaling property of the box model, and you can set the zoom in and zoom out;
scale style syntax:
transform:scale(x,y);
- x and y in scale() are separated by commas;
- The values of x and y are decimal types, and the value range is greater than 0;
Understand the scale syntax with the help of the following styles:
- Set
transform:scale(1,1);the style, indicating that the width and height of the box model are doubled, that is, unchanged; - Set
transform:scale(2,2);the style, indicating that the width and height of the box model are enlarged by 2 times; - Set
transform:scale(0.5,0.5);the style, indicating that the width and height of the box model are reduced to 0.5 times;
If only one parameter is set for scale, then the width and height are scaled by the same multiple at the same time, such as: setting transform:scale(2);style means that the width and height of the box model are enlarged by 2 times, which is equivalent to transform:scale(2,2);style;
You can set different multiples for the width and height, such as: set transform:scale(2,0.5);the style, indicating that the width of the box model is enlarged to 2 times of the original, and the height is reduced to 0.5 times of the original;
2. Use scale to set the zoom and directly set the size of the box model
Use transform:scaleto set the zoom factor of the box model;
The same function as above can also be achieved by directly modifying the size of the box model;
Modify the size of the box model directly,
- Unable to set the zoom center position, the box model can only extend to the left, right and bottom, but not to the top;
- It will affect the overall layout of the page and the layout of other box models; for example, if the box model becomes larger, the boxes below will be squeezed down;
Use transform:scaleto set the zoom,
- The zoom direction can be set arbitrarily,
- Does not affect the layout of other box models;
3. Code example
1. Code example - set two parameters to represent width and height scaling
Code example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 2D 转换 - rotate 旋转</title>
<style>
div {
width: 200px;
height: 200px;
/* 上下 100 像素外边距, 居中对齐 */
margin: 100px auto;
/* 设置背景颜色 */
background-color: pink;
/* 设置以左下角为中心旋转 */
transform-origin: 50% 50%;
/* 设置过渡动画 */
transition: all 1s;
}
/* 设置 鼠标 移动到 div::before 伪元素 上的效果 */
div:hover {
/* 鼠标移动上去后 */
transform: scale(2, 0.5);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
Results of the :
- Initial state :
- After the mouse moves over the box model: the width becomes twice the original, and the height becomes 0.5 times the original;
2. Code example - set 1 parameter to represent width and height scaling
Code example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 2D 转换 - rotate 旋转</title>
<style>
div {
width: 200px;
height: 200px;
/* 上下 100 像素外边距, 居中对齐 */
margin: 100px auto;
/* 设置背景颜色 */
background-color: pink;
/* 设置以左下角为中心旋转 */
transform-origin: 50% 50%;
/* 设置过渡动画 */
transition: all 1s;
}
/* 设置 鼠标 移动到 div::before 伪元素 上的效果 */
div:hover {
/* 鼠标移动上去后 */
transform: scale(2);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
Results of the :
- Initial state :
- After the mouse moves over the box model: the width and height become twice the original;
