Comment définir le zoom en CSS-tutoriel CSS-php.cn

Comment définir le zoom en CSS

醉折花枝作酒筹

Libérer： 2023-01-05 16:10:29

original

31581 Les gens l'ont consulté

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.

Comment définir le zoom en CSS

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轴同时缩放*/

Copier après la connexion

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>

Copier après la connexion

L'aperçu du navigateur est comme indiqué ci-dessous.

Comment définir le zoom en CSS

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.

Comment définir le zoom en CSS

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>

Copier après la connexion

L'aperçu du navigateur est comme indiqué ci-dessous.

Comment définir le zoom en CSS

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.

Comment définir le zoom en CSS

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>

Copier après la connexion

L'aperçu du navigateur est comme indiqué ci-dessous.

Comment définir le zoom en CSS

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);

Copier après la connexion

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!