Verwenden von CSS -Transformationen in der realen Welt

CSS -Konvertierung: Ein leistungsstarkes Werkzeug zur Lösung von Designschwierigkeiten

In diesem Artikel wird die Leistung der CSS-Konvertierung in realen Anwendungen untersucht, wie er verschiedene Designherausforderungen effektiv lösen und überzeugende visuelle Effekte erzielen kann. Wir lernen, wie man Elemente vertikal ausrichtet, schöne Pfeile erstellt, Ladeanimationen erstellt und Flip -Animationen usw. implementiert.

Die

CSS3 -Konvertierung wurde 2012 Standard, und zuvor haben einige Browser Unterstützung geleistet. Mit der Transformation können Sie die Webelemente wie Rotation, Skalierung oder Kippelemente problemlos transformieren, um nur eine Codezeile zu erreichen, die zuvor schwer zu erreichen war. Die CSS -Konvertierung unterstützt 2D- und 3D -Transformationen.

In Bezug auf die Browserkompatibilität unterstützen alle Mainstream -Browser die 2D -Konvertierung, einschließlich Internet Explorer 9 und später. Die 3D -Konvertierung wird nur teilweise in IE10 und später unterstützt.

In diesem Artikel werden die Grundlagen der Konvertierung nicht erklärt. Wenn Sie mit der Konvertierung nicht vertraut sind, wird empfohlen, zuerst die Einführung in die 2D- und 3D -Konvertierung zu lesen.

vertikale Ausrichtung von Kinderelementen

Die vertikale Ausrichtung von Elementen war für Webdesigner schon immer ein Problem. Obwohl es einfach erscheint, gibt es tatsächlich viele umständliche Techniken. Einige Methoden empfehlen,

und display: inline zu verwenden, andere empfehlen, vertical-align: middle und deren zugehörige Stile zu verwenden. Natürlich kann Flexbox oder Grid dieses Problem lösen, aber für kleinere Komponenten kann die Konvertierung eine einfachere Option sein. display: table

Wenn Elemente sehr variabel sind, kann die vertikale Ausrichtung komplizierter sein. Die CSS -Konvertierung bietet eine effektive Möglichkeit, dieses Problem zu lösen. Hier ist ein einfaches Beispiel mit zwei verschachtelten Divs:

<code class="language-html"><div class="parent">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  </div>
</div>

<div class="parent">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
  </div>
</div></code>

Wir setzen die Breite, Höhe und Rand für das übergeordnete Element und fügen etwas Abstand hinzu, um sie schöner zu machen:

<code class="language-css">.parent {
  height: 300px;
  width: 600px;
  padding: 0 1em;
  margin: 1em;
  border: 1px solid red;
}
.child {
  font-size: 1.2rem;
}</code>

Verwenden Sie dann

, um den Text vertikal zu zentrieren: transform: translateY(-50%);

<code class="language-css">.child {
  font-size: 1.2rem;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}</code>

Um Unschärfe zu vermeiden, können Sie

: perspective(1px) hinzufügen

<code class="language-css">.child {
  transform: perspective(1px) translateY(-50%);
}</code>

Auf diese Weise können die Kinderelemente, auch wenn die Textlänge unterschiedlich ist, perfekt vertikal zentriert werden.

Erstellen Sie einen Pfeil

Ein weiterer interessanter Anwendungsfall ist das Erstellen von skalierbaren Dialogpfeilen. Sie können Pfeile mit einem Grafikeditor erstellen, dies ist jedoch umständlich und das Bitmap -Bild kann möglicherweise nicht gut skaliert werden.

reine CSS -Lösungen sind effektiver. Angenommen, wir haben ein Textfeld:

<code class="language-html"><div class="box">
  <div class="box-content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
  </div>
</div></code>

Erstellen Sie einen Pfeil mit dem

pseudoelement und konvertieren Sie ihn mit einer Rotationstransformation in eine Pfeilform: ::before

<code class="language-css">.box::before {
  content: '';
  width: 1rem;
  height: 1rem;
  background-color: #e0e0e0;
  position: absolute;
  right: -0.5rem;
  top: 50%;
  margin-top: -0.5rem;
  transform: rotate(45deg);
}</code>

Auf diese Weise können die Pfeile, auch wenn die Seitenschriftengröße geändert wird, den Anteil beibehalten.

Erstellen Sie "Sprungball" -Ladenanimation

Um den Ladevorgang anzuzeigen, können Sie mithilfe von CSS -Animation und -Transformation eine Sprungball -Ladeanimation erstellen:

<code class="language-html"><div class="parent">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  </div>
</div>

<div class="parent">
  <div class="child">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
  </div>
</div></code>

<code class="language-css">.parent {
  height: 300px;
  width: 600px;
  padding: 0 1em;
  margin: 1em;
  border: 1px solid red;
}
.child {
  font-size: 1.2rem;
}</code>

Erstellen Sie die Ladeanimation "Rotator" mit SVG (dieser Teil ähnelt dem Originaltext. Um die Duplikation zu vermeiden, wird der detaillierte Code hier weggelassen, und nur der Überblick wird beibehalten)

SVG kann verwendet werden, um komplexere Ladeanimationen wie Spinner zu erstellen. Durch die Kombination von SVG -Elementen, CSS -Animationen und Transformationen können Sie visuell ansprechende Ladeeffekte erzeugen.

Erstellen Sie eine Flip -Animation

Schauen wir uns schließlich ein Beispiel eines Bildes mit einer Flip -Animation an. Wenn Sie Ihre Maus über das Bild schweben, flippt sie um und zeigt seine Beschreibung an. Dies ist sehr nützlich für Instagram-ähnliche Websites. (Dieser Teil des Inhalts ähnelt dem Originaltext. Um eine Duplikation zu vermeiden, wird der detaillierte Code hier weggelassen und nur der Überblick wird beibehalten)

glatte Flip -Animationseffekte können durch Verwendung von 3D -Konvertierung und transform-style: preserve-3d; sowie die transition Eigenschaften erreicht werden.

Vorsichtsmaßnahmen

Während CSS -Umwandlung und Animation leistungsstark sind, sollten sie mit Vorsicht verwendet werden, um zu vermeiden, dass Überbeanspruchung eine schlechte Benutzererfahrung verursacht.

Zusammenfassung

Dieser Artikel zeigt, wie CSS -Umwandlung mit anderen Technologien kombiniert werden kann, um verschiedene Designaufgaben zu lösen. Wir haben gelernt, wie man Elemente vertikal ausrichtet, skalierbare Pfeile erstellt, Lastanimationen springt und dreht und Flip -Animationen implementiert. Denken Sie daran, dass CSS verwendet werden sollte, um die Benutzererfahrung zu verbessern und nicht nur zu zeigen.

(Der Inhalt der "häufig gestellten Fragen zu CSS -Transformationen" im Originaltext stimmt stark mit dem Inhalt dieses Artikels überein, sodass er hier weggelassen wird)

Das obige ist der detaillierte Inhalt vonVerwenden von CSS -Transformationen in der realen Welt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!