Heim > Artikel > Web-Frontend > So skalieren Sie div-Elemente mit CSS
So skalieren Sie div-Elemente mit CSS
- WBOYOriginal
- 2021-11-29 17:42:448762Durchsuche
In CSS können Sie das Transformationsattribut verwenden, um div-Elemente zu skalieren. Wenn der Wert dieses Attributs „scale(x,y)“ ist, können Sie das Element skalieren. Die Syntax lautet „transform:scale“ (horizontales Skalierungsverhältnis). Vertikale Skalierung);".
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
So skalieren Sie div-Elemente mit CSS
Wir können div-Elemente über das Transformationsattribut skalieren. Wenn der Wert des Transformationsattributs auf „scale(x,y)“ gesetzt ist, bedeutet dies, dass wir skalieren können das div-Element Führen Sie eine 2D-Skalierungskonvertierung durch.
Nehmen wir ein Beispiel, um zu sehen, wie das Div skaliert wird. Das Beispiel sieht wie folgt aus:
<!DOCTYPE html>
<html>
<head>
<style>
.no{
width:300px;
height:100px;
background-color:#ff9900;
}
.yes{
width:300px;
height:100px;
background-color:#ff9900;
transform:scale(0.5,0.5);
}
</style>
</head>
<body>
<p>没缩放的div元素：</p>
<div class="no"></div>
<p>缩放的div元素：</p>
<div class="yes"></div>
</body>
</html>Ausgabeergebnis:
(Lernvideo-Sharing: css-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonSo skalieren Sie div-Elemente mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!