So skalieren Sie div-Elemente mit CSS-CSS-Tutorial-php.cn

So skalieren Sie div-Elemente mit CSS

WBOY

Freigeben： 2021-11-29 17:42:44

Original

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