Home > Article > Web Front-end > What is the syntax for css3 to double the size?
What is the syntax for css3 to double the size?
- 青灯夜游Original
- 2021-12-16 13:53:592522browse
The syntax for css3 to double the magnification is: 1. "Element {width: twice the original width value; height: twice the original height value;}", use the width and height attributes to change the width and height of the element Set to twice the original value; 2. "Element {transform: scale(2, 2);}".
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
css3 to achieve twice the magnification effect:
1. Use the width and height attributes
Set the values of the width and height attributes to twice the original width and height.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
width: 100px;
height: 100px;
background: red;
margin: 100px;
}
div:hover{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2. Use transform: scale(2, 2)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
width: 100px;
height: 100px;
background: red;
margin: 100px;
}
div:hover{
transform: scale(2, 2);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
css video tutorial）
The above is the detailed content of What is the syntax for css3 to double the size?. For more information, please follow other related articles on the PHP Chinese website!