suchen

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

2D-Transformation von Elementen mit CSS3

WBOY
WBOYnach vorne
2023-09-09 09:21:031380Durchsuche

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