So stellen Sie den Zoom im CSS ein-CSS-Tutorial-php.cn

So stellen Sie den Zoom im CSS ein

醉折花枝作酒筹

Freigeben： 2023-01-05 16:10:29

Original

31572 Leute haben es durchsucht

In CSS können Sie die Scale()-Methode des Transfrom-Attributs verwenden, um die Skalierung festzulegen. Das Syntaxformat lautet „transfrom:scale(direction)“. Die Methode „scale()“ wird verwendet, um die Größe des Elements zu ändern, das Element durch den in Vektorform definierten Skalierungswert zu vergrößern oder zu verkleinern und kann unterschiedliche Skalierungswerte in verschiedene Richtungen festlegen.

So stellen Sie den Zoom im CSS ein

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

In CSS3 können wir die Scale()-Methode des Transformationsattributs verwenden, um den Skalierungseffekt von Elementen zu erzielen. Zoom bezieht sich auf die Bedeutung von „herauszoomen“ und „vergrößern“.

Syntax:

transform: scaleX(x);         /*沿X轴方向缩放*/
transform: scaleY(y);         /*沿Y轴方向缩放*/
transform: scale(x, y);        /*沿X轴和Y轴同时缩放*/

Nach dem Login kopieren

Anweisungen:

Es gibt drei Skalierungssituationen: ScaleX(), ScaleY(), Scale(). Der Parameter x stellt den Skalierungsfaktor des Elements in Richtung der x-Achse dar, und der Parameter y stellt den Skalierungsfaktor des Elements in Richtung der y-Achse dar.

Wenn der Wert von x oder y zwischen 0 und 1 liegt, wird das Element verkleinert; wenn der Wert von x oder y größer als 1 ist, wird das Element vergrößert. Wenn Sie über das Konzept der „Vielfachen“ nachdenken, werden Sie es bald verstehen.

Beispiel: 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>

Nach dem Login kopieren

Die Browservorschau ist wie unten dargestellt.

So stellen Sie den Zoom im CSS ein

Analyse:

transform:scaleX(1.5); bedeutet, dass das Element in Richtung der x-Achse um das 1,5-fache vergrößert wird. Wenn Sie 1,5 auf 0,5 ändern, wird das Element in Richtung der x-Achse auf das 0,5-fache seiner ursprünglichen Größe verkleinert. Zu diesem Zeitpunkt ist der Vorschaueffekt wie in der Abbildung unten dargestellt.

So stellen Sie den Zoom im CSS ein

Tatsächlich kann transform:scaleX(1.5); tatsächlich transform:scale(1.5, 0); sein, Freunde können es selbst testen.

Beispiel: 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>

Nach dem Login kopieren

Die Browservorschau ist wie unten dargestellt.

So stellen Sie den Zoom im CSS ein

Analyse:

transform:scaleY(1.5); bedeutet, dass das Element in Richtung der y-Achse um das 1,5-fache vergrößert wird. Wenn Sie 1,5 auf 0,5 ändern, wird das Element in Richtung der y-Achse auf das 0,5-fache seiner ursprünglichen Größe verkleinert. Zu diesem Zeitpunkt ist der Browser-Vorschaueffekt wie in der folgenden Abbildung dargestellt.

So stellen Sie den Zoom im CSS ein

Tatsächlich kann transform:scaleY(1.5); tatsächlich transform:scale(0, 1.5); sein, Freunde können es selbst testen.

Beispiel: Skala(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>

Nach dem Login kopieren

Die Browservorschau ist wie unten dargestellt.

So stellen Sie den Zoom im CSS ein

Analyse:

transform:scale(1.2, 1.5); bedeutet, dass das Element gleichzeitig in x-Achsen- und y-Achsenrichtung vergrößert wird die Originalgröße und die Y-Achsenrichtung wird auf das 1,5-fache vergrößert. Tatsächlich kann transform:scale(1.2, 1.5); tatsächlich dem folgenden Code entsprechen:

transform:scaleX(1.2);
transform:scaleY(1.5);

Nach dem Login kopieren

Empfohlenes Lernen: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo stellen Sie den Zoom im CSS ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!