Maison > Article > interface Web > Comment définir le zoom en CSS
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!