Heim > Web-Frontend > CSS-Tutorial > So skalieren Sie div-Elemente mit CSS

So skalieren Sie div-Elemente mit CSS

WBOY
Freigeben: 2021-11-29 17:42:44
Original
8797 Leute haben es durchsucht

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

So skalieren Sie div-Elemente mit CSS

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>
Nach dem Login kopieren

Ausgabeergebnis:

So skalieren Sie div-Elemente mit CSS

(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!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage