Heim > Artikel > Web-Frontend > So stellen Sie den Zoom im CSS ein
So stellen Sie den Zoom im CSS ein
- 醉折花枝作酒筹Original
- 2021-04-21 17:47:3731579Durchsuche
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.
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轴同时缩放*/
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>Die Browservorschau ist wie unten dargestellt.
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.
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>Die Browservorschau ist wie unten dargestellt.
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.
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>Die Browservorschau ist wie unten dargestellt.
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);
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!