Heim >Web-Frontend >CSS-Tutorial >So vergrößern Sie div in CSS3
Methode: 1. Verwenden Sie das Transformationsattribut und die Scale()-Funktion, um das Div zu vergrößern. Die Syntax lautet „element {transform:scale (magnification)}“ 2. Verwenden Sie die Breiten- und Höhenattribute, um den Effekt der Vergrößerung zu erzielen div. Die Syntax ist „element {width :width;height:height}“.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
So vergrößern Sie ein Div in CSS3
Wenn Sie in CSS ein Div vergrößern möchten, können Sie dazu das Transformationsattribut sowie die Breiten- und Höhenattribute verwenden.
1. Verwenden Sie das Transformationsattribut mit der Funktion „scale()“, um den Vergrößerungs-Div-Effekt zu erzielen. Das Transformationsattribut wendet eine 2D- oder 3D-Transformation auf das Element an. Mit dieser Eigenschaft können wir das Element drehen, skalieren, verschieben oder neigen.
Das Beispiel lautet wie folgt:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin:0 auto; } .div1{ width:150px; height:100px; background:pink; transform:scale(1.5); } .div2{ width:150px; height:100px; background:pink; } </style> </head> <body> <div class="div1"></div> <br><br> <div class="div2"></div> </body> </html>
Ausgabeergebnis:
2 Verwenden Sie die Attribute width und height, um den Effekt einer Vergrößerung des Div zu erzielen.
Das Beispiel sieht wie folgt aus:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .div1{ width:300px; height:200px; background:pink; } .div2{ width:150px; height:100px; background:pink; } </style> </head> <body> <div class="div1"></div> <br><br> <div class="div2"></div> </body> </html>
Ausgabeergebnis:
(Lernvideo-Sharing:
CSS-Video-TutorialDas obige ist der detaillierte Inhalt vonSo vergrößern Sie div in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!