Heim > Web-Frontend > CSS-Tutorial > So drehen, vergrößern und verkleinern Sie in CSS3

So drehen, vergrößern und verkleinern Sie in CSS3

WBOY
Freigeben: 2021-12-16 17:56:27
Original
3202 Leute haben es durchsucht

Methode: 1. Verwenden Sie das Transformationsattribut und die Rotationsfunktion, um die Drehung des Elements festzulegen. Die Syntax lautet „transform:scale(angle);“ 2. Verwenden Sie das Transformationsattribut und die Scale-Funktion, um den Zoomfaktor festzulegen Element. Die Syntax lautet „transform:scale(Zoomfaktor). );“.

So drehen, vergrößern und verkleinern Sie in CSS3

Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.

So drehen, vergrößern und verkleinern Sie in CSS3

In CSS können Sie das Transformationsattribut zum Drehen, Vergrößern und Verkleinern verwenden.

Wenn dieses Attribut in Verbindung mit der Drehfunktion verwendet wird, kann das Element auf Drehen eingestellt werden. Wenn das Transformationsattribut in Verbindung mit der Skalierungsfunktion verwendet wird, kann das Element vergrößert oder verkleinert werden.

Das Beispiel sieht wie folgt aus:

<html>
<head>
<style> 
.img1{
transform:rotate(45deg);
}
.img2{
transform:scale(0.5);
}
.img3{
transform:scale(1.545deg);
}
</style>
</head>
<body>
<img  src="1118.02.png" class="img1" alt="So drehen, vergrößern und verkleinern Sie in CSS3" >
<img  src="1118.02.png" class="img2" alt="So drehen, vergrößern und verkleinern Sie in CSS3" >
<img  src="1118.02.png" class="img3" alt="So drehen, vergrößern und verkleinern Sie in CSS3" >
</body>
</html>
Nach dem Login kopieren

Ausgabeergebnis:

So drehen, vergrößern und verkleinern Sie in CSS3

(Lernvideo-Sharing: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo drehen, vergrößern und verkleinern Sie in CSS3. 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