Wie wende ich mithilfe von CSS mehrere Transformationseigenschaften auf ein Element an?-CSS-Tutorial-php.cn

Inhaltsverzeichnis

Grammatik

Beispiel

Wenden Sie zwei Transformationseigenschaften auf ein Element an

Mehrere Transformationseigenschaften auf Elemente anwenden

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

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.

Heim

Web-Frontend

CSS-Tutorial

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 02, 2023 am 11:17 AM

如何使用 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();
}

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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.

<b><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>
</b>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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.

Flip
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

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!

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Repo: Wie man Teamkollegen wiederbelebt

1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt

4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Wie lange dauert es, um Split Fiction zu schlagen?

3 Wochen vor By DDD

R.E.P.O. Dateispeicherspeicherort: Wo ist es und wie schützt sie?

4 Wochen vor By DDD

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7355

Java-Tutorial

1628

CakePHP-Tutorial

1353

Laravel-Tutorial

1265

PHP-Tutorial

1214

Related knowledge

Entmystifizierende Bildschirmleser: Zugrunde Formen und Best Practices Mar 08, 2025 am 09:45 AM

Dies ist der 3. Beitrag in einer kleinen Serie, die wir in Form von Barrierefreiheit gemacht haben. Wenn Sie den zweiten Beitrag verpasst haben, lesen Sie "Verwalten des Benutzerfokus mit: Fokus-Sichtbar". In

Erstellen Sie ein JavaScript -Kontaktformular mit dem Smart Forms Framework Mar 07, 2025 am 11:33 AM

Dieses Tutorial zeigt, dass professionelle JavaScript-Formulare mithilfe des Frameworks Smart Forms erstellt werden (Hinweis: Nicht mehr verfügbar). Während der Rahmen selbst nicht verfügbar ist, bleiben die Prinzipien und Techniken für andere Formbauer relevant.

Hinzufügen von Kastenschatten zu WordPress -Blöcken und -Elementen Mar 09, 2025 pm 12:53 PM

Die CSS-Box-Shadow- und Umrisseigenschaften haben Thema gewonnen. JSON-Unterstützung in WordPress 6.1. Sei ein paar Beispiele für die Funktionsweise in realen Themen und welche Optionen wir diese Stile auf WordPress -Blöcke und Elemente anwenden müssen.

Vergleich der 5 besten PHP -Formbauer (und 3 kostenlose Skripte) Mar 04, 2025 am 10:22 AM

In diesem Artikel werden die auf dem Envato -Markt verfügbaren Top -Skripte für PHP -Formulierungen untersucht und deren Funktionen, Flexibilität und Design verglichen. Lassen Sie uns vor dem Tauchen in bestimmte Optionen verstehen, was ein PHP -Formular Builder ist und warum Sie einen verwenden würden. Eine PHP -Form

Arbeiten mit GraphQL Caching Mar 19, 2025 am 09:36 AM

Wenn Sie kürzlich mit GraphQL gearbeitet oder seine Vor- und Nachteile überprüft haben, haben Sie zweifellos Dinge wie "GraphQL nicht unterstützen Caching" oder gehört

Machen Sie Ihren ersten Seltsamen -Sufle -Übergang Mar 15, 2025 am 11:08 AM

Die Sufelte Transition -API bietet eine Möglichkeit, Komponenten zu beleben, wenn sie das Dokument eingeben oder verlassen, einschließlich benutzerdefinierter Svelte -Übergänge.

Show, Don ' Tell Mar 16, 2025 am 11:49 AM

Wie viel Zeit damit, die Inhaltspräsentation für Ihre Websites zu entwerfen? Wenn Sie einen neuen Blog -Beitrag schreiben oder eine neue Seite erstellen, denken Sie darüber nach

Edle und coole CSS -Scrollbars: Ein Schaufenster Mar 10, 2025 am 11:37 AM

In diesem Artikel werden wir in die Welt der Scrollbars eintauchen. Ich weiß, es klingt nicht zu glamourös, aber vertrau mir, eine gut gestaltete Seite geht Hand in Hand

See all articles