Wenden Sie mehrere Transformationen in CSS an
-
Wenden Sie mehrere Transformationen an, indem Sie mehrere
transform-Werte in CSS angeben -
Wenden Sie mehrere Transformationen an, indem Sie mehrere
transformierenin CSS angeben -
Wenden Sie mehrere Transformationen an, indem Sie mehrere
transform-originin CSS angeben - Wenden Sie mehrere Transformationen mit verschachtelten Klassen in CSS an
- Abschluss
CSS transform ist eine leistungsstarke, aber zu wenig genutzte Methode, um Elementen Animationseffekte hinzuzufügen. Wenn jedoch mehrere Transformationen gleichzeitig angewendet werden, kann es schwierig werden, das gewünschte Ergebnis zu erzielen. Beispielsweise möchten wir, dass sich Elemente synchron transformieren, wenn sich Elemente überlappen.
In diesem Artikel wird untersucht, wie mehrere Transformationen in CSS angewendet werden können.
Wenden Sie mehrere Transformationen an, indem Sie mehrere transform-Werte in CSS angeben
Es gibt viele Möglichkeiten, mehrere CSS-Transformationen zu verwenden. Wir werden sie in den folgenden Abschnitten diskutieren.
Eine Möglichkeit, mehrere CSS-Transformationen anzuwenden, ist die Verwendung der abgekürzten transform-Eigenschaft. Diese Eigenschaft kann mehrere Werte annehmen, die durch Leerzeichen getrennt sind.
Zum Beispiel:
transform: rotate(45deg) scale(2);
Diese Linie würde ein Element um 45 Grad drehen und dann seine Größe verdoppeln.
Ein weiteres Beispiel ist, wenn Sie ein Element um 30 Grad drehen und es dann um 50 Pixel verschieben möchten, würden Sie den folgenden Code verwenden:
transform: rotate(30deg) translate(50px);
Diese Linie kann eine wertvolle Technik zum Erstellen komplexer Animationen und Interaktionen sein.
Sehen wir uns nun einige Beispiele für mehrere Transformationen an. Sie können den folgenden Code für die Transformation eines Bildes verwenden.
Beispielcode:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
margin: 10px;
}
.box {
background: url("/img/DelftStack/logo.png")
no-repeat;
background-size: cover;
height: 100px;
width: 600px;
border: 2px solid #000000;
transform: rotate(110deg) translate(45px, -160px);
}
h1 {
color: #000000;
}
</style>
</head>
<body>
<h1>
CSS Multiple transforms
</h1>
<strong>
How to apply multiple transforms in CSS?
</strong>
<div class="box"></div>
</body>
</html>
Im obigen Code haben wir für die Transformation des Bildes die CSS-Funktion transform: rotation(110deg) translate(45px, -160px) verwendet. Dieser CSS-Code dreht das Bild um bis zu 110 Grad.
Wenn Sie also den obigen Code verwenden, können Sie ihn anwenden, um jedes Bild zu transformieren.
Wenden Sie mehrere Transformationen an, indem Sie mehrere transformieren in CSS angeben
Eine andere Möglichkeit, mehrere Transformationen zu verwenden, besteht darin, jede Transformation einzeln anzugeben.
Zum Beispiel:
transform: rotate(45deg);
transform: scale(2);
Wenden Sie mehrere Transformationen an, indem Sie mehrere transform-origin in CSS angeben
Sie können auch die Eigenschaft transform-origin verwenden, um den Ausgangspunkt für die Transformation zu ändern. Zum Beispiel:
transform-origin: 50% 50%;
transform-origin: bottom right;
Dieser würde den Ursprungspunkt auf die Mitte des Elements oder die untere rechte Ecke der Komponente ändern.
Wenden Sie mehrere Transformationen mit verschachtelten Klassen in CSS an
Es gibt eine andere Möglichkeit, die CSS-Transformation anzuwenden. Das Folgende ist ein CSS-Code, aber wir werden zwei verschachtelte Klassen erstellen, outer-transform und inner-transform, um mehrere CSS-transforms anzuwenden.
Dieser Code liefert auch unsere gewünschte Ausgabe.
Beispielcode:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
color: #000000;
}
.outer-transform {
transform: translate(150px, 180px);
}
.inner-transform {
background: url("/img/DelftStack/logo.png")
no-repeat;
background-size: cover;
height: 100px;
width: 600px;
border: 2px solid #000000;
transform: rotate(-150deg);
}
</style>
</head>
<body>
<h1>
CSS multiple transforms
</h1>
<strong>
How to apply multiple transforms in CSS?
</strong>
<div class="outer-transform">
<div class="inner-transform"></div>
</div>
</body>
</html>
Ausgang:
Abschluss
Wir freuen uns, Ihnen mitteilen zu können, dass Sie in CSS mehrere Transformationen auf ein Element anwenden können. Sie können ein div haben, das gleichzeitig gedreht und verschoben wird, und sogar ein Element, das in verschiedene Richtungen gedreht und verschoben wird.
Transformationen sind ein leistungsstarkes Werkzeug zum Erstellen visueller Effekte auf HTML-Elementen. CSS unterstützt mehrere Transformationen, was eine größere Auswahl an Effekten ermöglicht.
Wenn sie zusammen verwendet werden, können Transformationen einige wirklich atemberaubende visuelle Effekte erzeugen.
Zeeshan is a detail oriented software engineer that helps companies and individuals make their lives and easier with software solutions.
LinkedIn