Heim > Artikel > Web-Frontend > 2D-Transformation von Elementen mit CSS3

2D-Transformation von Elementen mit CSS3

WBOYnach vorne: 2023-09-09 09:21:031372Durchsuche

2D-Transformationen werden verwendet, um die Struktur von Elementen wie Translation, Rotation, Skalierung und Neigung neu zu verändern.

Hier sind einige 2D-Transformationsfunktionen –

wird verwendet, um Elemente zu ändern. Die Breite und Höhe von wird verwendet, um die Breite des Elements zu ändern Beispiel

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
   width: 100px;
   height: 100px;
   background-color: rgb(255, 17, 0);
   border:2px solid black;
   margin: 20px;
   display: inline-block;
   color: white;
}
.rotate {
   transform: rotate(20deg);
}
.translate {
   transform: translate(30px, 20px);
}
.scale {
   transform: scale(2, 1);
   margin-left:70px;
}
.skew {
   transform: skew(20deg);
}
</style>
</head>
<body>
<h1>2D transformation of elements </h1>
<div class="rotate">ROTATE</div>
<div class="skew">SKEW</div>
<div class="scale">SCALE</div>
<div class="translate">TRANSLATE</div>
</body>
</html>

Sr.Nr.	Werte und Beschreibung
1	Matrix(n,n,n,n,n,n) wird verwendet. Definieren Sie eine Matrixtransformation mit sechs Werten.
2	translate(x,y) wird verwendet, um Elemente entlang der x- und y-Achse zu transformieren translateX(n) Wird zum Transformieren von Elementen entlang der x-Achse verwendet.
	4 translateY(n) Wird zum Transformieren von Elementen entlang der y-Achse verwendet (x,y)
	6 scaleX(n)
	Hier ist das Code zur 2D-Transformation des Elements mit CSS3 -
Echtzeit-Demo	Ausgabe

Das obige ist der detaillierte Inhalt von2D-Transformation von Elementen mit CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css3 td

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Ein Überblick über die neuen Funktionen von CSS3: So wenden Sie CSS3-Animationseffekte anNächster Artikel：Ein Überblick über die neuen Funktionen von CSS3: So wenden Sie CSS3-Animationseffekte an

In Verbindung stehende Artikel

Mehr sehen