Heim  >  Artikel  >  Web-Frontend  >  Wie wende ich mithilfe von CSS mehrere Transformationseigenschaften auf ein Element an?

Wie wende ich mithilfe von CSS mehrere Transformationseigenschaften auf ein Element an?

WBOY
WBOYnach vorne
2023-09-02 11:17:021321Durchsuche

如何使用 CSS 将多个变换属性应用于元素?

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-Transformationseigenschaft

Mit der Eigenschaft

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.

Grammatik

element{
   transform: rotate() | scale() | skew() | translate();
}

Beispiel

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>

Wenden Sie zwei Transformationseigenschaften auf ein Element an

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.

Beispiel

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 Funktion

rotate 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.

Mehrere Transformationseigenschaften auf Elemente anwenden

Mit der Kurzschriftsyntax können Sie mehrere Transformationsfunktionen in ein einziges Attribut transform einschließen, indem Sie sie durch Kommas trennen.

Beispiel

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.

Beispiel

<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.

Card ist ein Container, der zwei untergeordnete Elemente enthält,

.front

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.

    Die
  • Flip
  • -Animation bewirkt, dass sich die Karte in 0,6 Sekunden um 180 Grad dreht, und die
  • Shrink

    -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

  • In diesem Artikel haben wir erfahren, dass die Anwendung mehrerer Transformationseigenschaften mithilfe von CSS eine einfache Möglichkeit ist, komplexe Animationen und Effekte von HTML-Elementen zu erstellen. Mit dem Attribut
transform

können Sie verschiedene Transformationen wie Skalierung, Drehung, Neigung und Übersetzung auf jedes HTML-Element auf Ihrer Webseite anwenden. Durch die Kombination mehrerer Transformationseigenschaften können Sie dynamischere und attraktivere Designs erstellen.

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!

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