Maison > Article > interface Web > Comment définir le zoom en CSS
Comment définir le zoom en CSS
- 醉折花枝作酒筹original
- 2021-04-21 17:47:3731568parcourir
En CSS, vous pouvez utiliser la méthode scale() de l'attribut transfrom pour définir la mise à l'échelle. Le format de syntaxe est "transfrom:scale(direction)". La méthode scale() est utilisée pour modifier la taille de l'élément, en agrandissant ou en réduisant l'élément via la valeur de mise à l'échelle définie sous forme vectorielle, et peut définir différentes valeurs de mise à l'échelle dans différentes directions.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.
En CSS3, nous pouvons utiliser la méthode scale() de l'attribut transform pour obtenir l'effet de mise à l'échelle des éléments. Zoom fait référence à la signification de « zoom arrière » et « zoom avant ».
Syntaxe :
transform: scaleX(x); /*沿X轴方向缩放*/ transform: scaleY(y); /*沿Y轴方向缩放*/ transform: scale(x, y); /*沿X轴和Y轴同时缩放*/
Explication :
Il existe trois situations de mise à l'échelle : scaleX(), scaleY(), scale(). Le paramètre x représente le facteur d'échelle de l'élément dans la direction de l'axe x et le paramètre y représente le facteur d'échelle de l'élément dans la direction de l'axe y.
Lorsque la valeur de x ou y est comprise entre 0 et 1, l'élément est réduit ; lorsque la valeur de x ou y est supérieure à 1, l'élément est agrandi. Si vous réfléchissez au concept de « multiples », vous le comprendrez bientôt.
Exemple : 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>L'aperçu du navigateur est comme indiqué ci-dessous.
Analyse :
transform:scaleX(1.5); signifie que l'élément est agrandi 1,5 fois dans la direction de l'axe x. Si vous modifiez 1,5 en 0,5, l'élément sera réduit à 0,5 fois sa taille d'origine dans la direction de l'axe x. À ce stade, l'effet d'aperçu est tel qu'indiqué dans la figure ci-dessous.
En fait, transform:scaleX(1.5); peut en fait être équivalent à transform:scale(1.5, 0);, les amis peuvent le tester par eux-mêmes.
Exemple : 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>L'aperçu du navigateur est comme indiqué ci-dessous.
Analyse :
transform:scaleY(1.5); signifie que l'élément est agrandi 1,5 fois dans la direction de l'axe y. Si vous modifiez 1,5 en 0,5, l'élément sera réduit à 0,5 fois sa taille d'origine dans la direction de l'axe y. À ce stade, l'effet d'aperçu du navigateur est tel qu'indiqué dans la figure ci-dessous.
En fait, transform:scaleY(1.5); peut en fait être équivalent à transform:scale(0, 1.5);, les amis peuvent le tester par eux-mêmes.
Exemple : 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>L'aperçu du navigateur est comme indiqué ci-dessous.
Analyse :
transform:scale(1.2, 1.5); signifie que l'élément est agrandi dans les directions des axes x et y à en même temps, dans la direction de l'axe x. Le grossissement est de 1,2 fois celui de l'original et la direction de l'axe y est agrandie de 1,5 fois celui de l'original. En fait, transform:scale(1.2, 1.5); peut en fait être équivalent au code suivant :
transform:scaleX(1.2); transform:scaleY(1.5);
Apprentissage recommandé : tutoriel vidéo CSS
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!