Heim > Artikel > Web-Frontend > Wie wende ich mithilfe von CSS mehrere Transformationseigenschaften auf ein Element an?
Eine der leistungsstärksten Funktionen von CSS ist die Möglichkeit, mehrere Transformationen auf ein Element anzuwenden, mit denen sich atemberaubende visuelle Effekte und Animationen erstellen lassen. In diesem Artikel besprechen wir, wie Sie mithilfe von CSS mehrere Transformationseigenschaften auf ein Element anwenden, und geben Beispiele dafür, wie Sie diese Technik nutzen können, um die Benutzererfahrung Ihrer Website zu verbessern.
Wir behandeln die grundlegende Syntax von Transformationseigenschaften sowie fortgeschrittenere Techniken wie das Verschachteln von Transformationen und die Verwendung mehrerer Transformationen zum Erstellen komplexer Animationen. Egal, ob Sie Anfänger oder erfahrener Webentwickler sind, dieser Artikel vermittelt Ihnen das Wissen und die Fähigkeiten, die Sie benötigen, um Ihre CSS-Kenntnisse auf die nächste Stufe zu heben.
CSS transform können Entwickler verschiedene Transformationen auf HTML-Elemente anwenden, wie z. B. Skalierung, Drehung, Neigung und Übersetzung. Das Attribut transform ist sehr vielseitig und ermöglicht eine kreative und dynamische Gestaltung von Webseiten.
element{ transform: rotate() | scale() | skew() | translate(); }
Nehmen wir ein Beispiel für die Drehung eines HTML-Elements mithilfe des Attributs transform. Um ein Element zu drehen, verwenden wir die Funktion rotate, die einen Winkelwert (in Grad) als Argument verwendet. Hier ist ein Beispiel -
<html> <div class="rotate"> Column </div> <style> .rotate { background-color: orange; margin: 30px; width: 70px; height: 90px; transform: rotate(45deg); } </style> </html>
Um mehrere Transformationseigenschaften auf ein Element anzuwenden, fügen Sie einfach jede Transformationseigenschaft, die Sie anwenden möchten, durch Leerzeichen getrennt in dieselbe CSS-Regel ein.
Angenommen, Sie möchten einen Rotations- und Skalierungseffekt auf ein Element anwenden. Werfen wir einen Blick darauf.
<html> <head> <style> .rotate { background-color: orange; margin: 50px; width: 70px; height: 60px; text-align: center; letter-spacing: 1px; } .rotate:hover { transform: rotate(65deg) scale(1.5); } </style> </head> <body> <h1>CSS Transform Properties</h1> <h3>Given below is a div element which is rotated by 65deg as well as scaled up by 1.5 on hovering.</h3> <div class="rotate"> Column </div> </body> </html>
Im obigen Beispiel lokalisiert der Selektor .rotate das zu transformierende Element und das Attribut transform enthält die Funktionen rotate und scale, getrennt durch Leerzeichen.
Die Funktionrotate wendet eine 65-Grad-Drehung auf das Element an, während die Funktion scale das Element auf 150 % seiner ursprünglichen Größe skaliert. Transformationseigenschaften werden angewendet, wenn Sie mit der Maus über das Element fahren.
Mit der Kurzschriftsyntax können Sie mehrere Transformationsfunktionen in ein einziges Attribut transform einschließen, indem Sie sie durch Kommas trennen.
Hier ist ein Beispiel. Hier wendet die Funktion „rotate“ eine Drehung um 65 Grad auf das Element an, während die Funktion „scale“ das Element auf 150 % seiner ursprünglichen Größe skaliert. Die translate-Funktion verschiebt das Element um 40 Pixel nach rechts und 35 Pixel nach unten von seiner ursprünglichen Position. Transformationseigenschaften werden angewendet, wenn Sie mit der Maus über das Element fahren.
<html>
<head>
<style>
.rotate {
background-color: yellow;
margin-left: 80px;
width: 70px;
height: 60px;
text-align: center;
letter-spacing: 1px;
}
.rotate:hover {
transform: rotate(65deg) scale(1.5) translate(40px, 35px);
}
</style>
</head>
<body>
<h1>CSS Transform Properties</h1>
<h3>Given below is a div element which is rotated by 65deg as well as scaled up 150 times on hovering. Also, it translates by 40px and 35px.</h3>
<div class="rotate"> Column </div>
</body>
</html>
Verwenden Sie mehrere Transformationen
Lassen Sie uns eine Animation erstellen, die die Karte umdreht, um beim Klicken ihre Rückseite zu zeigen. Sie können dies erreichen, indem Sie mehrere Transformationen in CSS zusammen mit einigen Keyframe-Animationen verwenden.
<html> <head> <style> .card { width: 200px; height: 300px; position: relative; transform-style: preserve-3d; transition: all 0.6s ease-in-out; } .card .front { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; background-color: #FFFDD0; } .card .back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; background-color: #FFDEAD; transform: rotateY(180deg); } .card:hover { transform: rotateY(180deg); } .card:active { transform: rotateY(180deg) scale(0.8); } @keyframes flip { from { transform: rotateY(0deg); } to { transform: rotateY(180deg); } } @keyframes shrink { from { transform: rotateY(180deg) scale(1); } to { transform: rotateY(180deg) scale(0.8); } } .card:active { animation: flip 0.6s ease-in-out, shrink 0.6s ease-in-out; } </style> </head> <body> <div class="card"> <div class="front"> <h2> Front Side </h2> <p> Hello World!! This is the front side of the card. Hover on me to see the back side. </p> </div> <div class="back"> <h2> Back Side </h2> <p> Hello World!! This is the back side of the card. </p> </div> </div> </body> </html>
Wenn wir mit der Maus über die vordere Karte fahren, können wir die Rückseite der Karte sehen.
und
.back, die jeweils die Vorder- und Rückseite der Karte darstellen. Die Elemente .front und .back sind absolut innerhalb des Containers .card positioniert und ihre Eigenschaft backface-visibility ist auf hidden gesetzt, um zu verhindern, dass sie sichtbar sind, wenn sie dem Benutzer gegenüberstehen. Wenn Sie mit der Maus über eine Karte fahren, wird sie umgedreht, um ihre Rückseite freizulegen. Wenn Sie auf eine Karte klicken, wird sie umgedreht und auf 80 % ihrer Originalgröße verkleinert.
-Animation sorgt dafür, dass die Karte im gleichen Zeitraum auf 80 % ihrer ursprünglichen Größe schrumpft. Wenn Sie auf eine Karte klicken, werden beide Animationen gleichzeitig angewendet, wodurch eine komplexe Animation entsteht, die mehrere Transformationen und Übergänge zwischen Vorder- und Rückseite umfasst.
Fazit
Das obige ist der detaillierte Inhalt vonWie wende ich mithilfe von CSS mehrere Transformationseigenschaften auf ein Element an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!