CSS-Transformationen und Transition

Von Ivaylo Ivanov 18-12-2020 Selbst gemacht, Programmierung, UI / UX-Design 11 Minuten

CSS3-Transformations- und Transitionseigenschaften haben es für Frontend-Entwickler sehr einfach gemacht, Elemente innerhalb einer Koordinate zu erstellen, zu verschieben, umzuformen, zu drehen, zu skalieren und zu übersetzen, ohne dafür JavaScript zu verwenden. Durch das Hinzufügen dieser Eigenschaften zu CSS3 hat sich das Bild des Webs von einem statischen, textähnlichen zu einem dynamischeren, mit visuellen Effekten geladenen Bild gewandelt.

Transform ist eine Eigenschaft, mit der man ein Element in seiner Form, Größe und Position verändern kann. Es benötigt fünf Werte - Rotation, Translation, Schräglage, Skalierung und Matrix. Eine Transitionseigenschaft steuert die Geschwindigkeit und Dauer einer Transformation und macht sie glatt und linear.
Transformation und Transition sind eigenständige Eigenschaften, aber sie arbeiten normalerweise zusammen, um eine konsistente und geradlinige Bewegung der Elemente innerhalb einer Webseite zu erzeugen. Ohne Übergang finden die Transformationseffekte sofort und abrupt statt.
CSS-Transformation und Transition sind oft unter fortgeschrittenem CSS angesiedelt. Obwohl sie nicht so oft wie Texteigenschaften verwendet werden, haben sie nichts Besonderes an sich. Sie folgen immer noch dem Standard-CSS-Regelsatz und der Syntax. Der Trick besteht darin, zu verstehen, wie man sie auf dem Bildschirm innerhalb einer bestimmten Koordinate manipulieren kann.

Transform

Die Transform-Eigenschaft verändert den Zustand, die Position und die Struktur eines Elements. Dies findet insbesondere bei Ereignissen wie z.B. Mouseovers Verwendung. Es erlaubt dir, Elemente innerhalb der X- und Y-Achse zu verschieben, zu verdrehen, zu rotieren und zu verschieben. Die CSS-Transformation kennt zwei Arten, 2D- (Standard-Transformation) und 3D-Transformationen. Bei 3D kann die Transformation innerhalb der X-, Y- und Z-Achse erfolgen.
Die Syntax für transform ist recht einfach

transform: rotate(90deg);

CSS Transform hat zwei Eigenschaften - transform und transform-origin. Letztere ist verantwortlich für die Transformation von Elementen und für die Platzierung der Elemente auf der X-, Y- und Z-Achse. Die Einheiten für transform-origin sind links, rechts, Mitte, oben, unten und %.

transform: rotate(90deg); 
transform-origin: 30% 20%;

Die erste Einheit, 30%, ist für die x-Achse, während die zweite Einheit 20% für die y-Achse ist. Kurz gesagt können die Eigenschaften "transform" und "transform-origin" auf derselben Linie kombiniert werden.

transform: rotate(40deg) 20% 30%;

Rotate()

Rotate() ist ein Wert, der der Transform-Eigenschaft zugeordnet wird. Er dreht ein Element im oder gegen den Uhrzeigersinn, je nach Gradzahl. Der Rotate-Wert nimmt einen Parameter in Grad an. Ein positiver Grad (deg) bewegt ein Element im Uhrzeigersinn, und ein negativer Grad bewegt das Element gegen den Uhrzeigersinn.

transform: rotate(-40deg) /* this moves 40deg counter clockwise */

Translate()

Dies bewegt ein Element von seiner aktuellen Position zu einer anderen Position gemäß den Parametern der X- und Y-Achse.

transform: translate (100px, 90px);

Der erste Wert, 100, verschiebt das Element nach rechts, während der zweite Wert, 90, das Element von seiner aktuellen Position nach unten verschiebt. Wenn die gleichen Werte negativ waren, -100 und -90, verschiebt es das Element 100px nach links und 90px nach oben von seiner aktuellen Position.
Die Achse kann auch in der Code-Deklaration angegeben und mit einem einzigen Wert versehen werden.

transform: translateY(20px); 
transform: translateX(30px);

Skew()

Der skew()-Wert verschiebt ein Element entlang der X- oder Y-Achse.

Scale()

Scale() vergrößert oder verkleinert die Höhe und Breite eines Elements.

transform: scale(3);

Dadurch wird das Element dreimal so groß wie sein Original. Der Scale-Wert benötigt nur zwei Parameter. Einen für die Breite des Elements und einen für die Höhe.

transform: scale(2, 5) /* this will make the width twice the original size and the height 5 times it's original size. */

ScaleX vergrößert/verkleinert nur die Breite eines Elements, während der scaleY die Höhe des Elements vergrößert/verkleinert.
Du kannst alle Transformations-Eigenschaften auf einer Zeile wie folgt angeben:

Transform: translate(10px, 10px) scale (2) rotate(40deg) skew(3deg, 10deg)

Ein einfacher Klick-Effekt für einen Button mit Transform

Schau dir den Effekt an, wenn du auf diesen Button klickst

<button>Submit</button>


button { 
  padding: 10px 15px;
  font-size: 20px;
  font-family: "Lucida Console", Courier, monospace;
  text-align: center;
  outline: none;
  cursor: pointer;
  color: #ffffff;
  background-color: #592720;
  border: none;
  border-radius: 15px;
  box-shadow: 0 5px #777;
}
button:active {
  background-color: #8b0000;
  box-shadow: 0 5px #999;
  transform: translateY(6px);   
}

3D Transform

Mit 3D Transform kannst du ein Element auf den drei Achsen X, Y und Z bewegen, drehen, schräg stellen und skalieren. 3D Transform macht sich die Eigenschaft der Perspektive zunutze. Wenn sie mit einem Element verbunden ist, erlaubt diese Eigenschaft dem Element, sich so zu verhalten, als befände es sich in einem dreidimensionalen Raum. Der Wert der perspektivischen Eigenschaft ist eine ganze Zahl und gibt die Entfernung vom Ursprung des Elements auf der z-Achse an. Der 3D-Effekt gibt eine Illusion von Tiefe.

transform: rotateZ(90deg);

Für eine 3D-Demo werden wir eine Karte erstellen, die beim Schweben eine Rückseite hat. Du kannst sie in Bildergalerien verwenden. Die Vorderseite hat ein Bild, während die Rückseite die Beschreibung ist.
Zusätzlich zur Perspektive werden wir die backface-Sichtbarkeitseigenschaft der Rückseite verwenden, die angibt, ob die Rückseite eines Elements sichtbar ist, wenn es dem User zugewandt ist. Es funktioniert wie ein Spiegelschirm.

<h2>Turkey</h2> 
<div class="flip-card"> 
  <div class="card-inner"> 
    <div class="card-front"> 
      <img src="https://www.telegraph.co.uk/content/dam/Travel/2020/June/florence-rooftops-italy-getty-xlarge.jpg" alt="Turkey" style="width:300px;height:300px;"> 
      <p>Learn more...</p> 
    </div> 
    <div class="card-back"> 
      <h1>Turkey</h1>  
      <h3>Have you been to Turkey?</h3>  
      <p>Turkey, officially the Republic of Turkey, is a transcontinental country located mainly on the Anatolian Peninsula in Western Asia, with a smaller portion on the Balkan Peninsula in Southeastern Europe.</p> 
      <a href="">Go to official page</a> 
    </div> 
  </div> 
</div>

p, h1, h3, a { 
  font-family: "Lucida Console", Courier, monospace; 
  padding: 3px; 
} 
p{ 
  color: black; 
} 
h3{ 
  color:yellow; 
} 
a{ 
  color:grey; 
} 
.flip-card { 
  background-color: transparent; 
  width: 300px; 
  height: 300px; 
  perspective: 1000px; 
   border: 10px solid #592720; 
} 
.card-inner { 
  position: relative; 
  width: 100%; 
  height: 100%; 
  text-align: center; 
  transition: transform 0.6s; 
  transform-style: preserve-3d; 
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); 
} 
.flip-card:hover .card-inner { 
  transform: rotateY(180deg); 
} 
.card-front, .card-back { 
  position: absolute; 
  width: 100%; 
  height: 100%; 
  -webkit-backface-visibility: hidden; 
  backface-visibility: hidden; 
} 
.card-back { 
  background-color: #ad0000; 
  color: white; 
  transform: rotateY(180deg); 
}

Transition

Die Transition-Eigenschaft fügt den Elementen Zeitdauern, Verzögerungen und Timing-Funktionen hinzu. So können sie sanft, gleichmäßig und progressiv von einem Zustand in einen anderen wechseln. Zwei Dinge müssen bei der Verwendung von Transition angegeben werden. Zum einen die Eigenschaft, auf welche die Transition angewendet wird und zum anderen die Dauer des Effekts.
Die Transition funktioniert allein ohne Transformation. Eigentlich ist die Transformation nämlich nur eine Eigenschaft der Transition.

<html>
  <body>
    <div>One Div</div>
  </body>
</html>

div{ 
  width: 200px; 
  height: 200px; 
  background-color: #ab4e52; 
  transition: background-color 2s; 
} 
div:hover { 
  background-color: #fa0000;
}

Der obige Code ändert die Hintergrundfarbe allmählich von einem dunklen kastanienbraunen Farbton zu einem roten Farbton über eine Dauer von 2 Sekunden, wie in der Übergangserklärung angegeben, wenn die Maus über das div schwebt.
Wir könnten auch die Breite des divs ändern, diesmal mit einer kleinen Verzögerung und einer Timing-Funktion.

<html>
  <body>
    <div>One Div</div>
  </body>
</html>

div { 
  width: 100px; 
  height: 100px; 
  background-color: #ab4e52; 
  transition: width, height 1s; 
  transition-delay: 3s; 
  transition-timing-function: ease; 
} 
div:hover { 
  width: 200px; 
  height: 200px; 
}

Wenn die Maus wie in diesem Fall über dem Div schwebt, wird die Größe des Divs verdoppelt. Allerdings gibt es einen 3-sekündigen-Effekt, bevor dies passiert. Die Entwicklung findet in einer 'sanften' Bewegung statt, die wir uns als nächstes ansehen werden.

Funktionen zur Transitionszeit und Verzögerungen

Die Transitionsverzögerung verursacht vor einem Effekt eine Verzögerung. Die Transitions-Zeit-Funktion gibt die Geschwindigkeit und Bewegung des Effekts an. Laut W3Schools,

“Kann die transition-timing-function Eigenschaft folgende Werte haben:

ease - definiert einen Transitionseffekt mit einem langsamen Start, dann schnell, dann langsam beenden (dies ist die Standardeinstellung)
linear - gibt einen Transitionseffekt mit der gleichen Geschwindigkeit von Anfang bis Ende an
ease-in - gibt einen Transitionseffekt mit einem langsamen Start an
ease-out - gibt einen Transitionseffekt mit einem langsamen Ende an
ease-in-out - gibt einen Transitionseffekt mit einem langsamen Anfang und Ende an
cubic-bezier(n,n,n,n,n) - lässt dich deine eigenen Werte in einer cubic-bezier Funktion definieren".

Transition shorthand packt Transitionseigenschaft, Dauer, Verzögerung und Timing-Funktion in einer einzigen Zeile. Der Breiten- und Höheneffekt kann wie folgt umgeschrieben werden:

transition: width 1s, height 1s ease 3s.

Es nimmt dann dieses Format an. Transitions-Eigenschaft, Transitions-Dauer, Transitions-Zeit-Funktion und Transitions-Verzögerung. Transition-Verzögerung sowie die Zeit-Funktion sind optional.

Ein abgerundetes Bild mit Transition + Transform erstellen

Schau dir an, was passiert, wenn du über dieses Bild fährst

<img src="https://img.freepik.com/free-vector/beautiful-gradient-spring-landscape_23-2148448598.jpg?size=626&ext=jpg" alt="landscape" /> 
<p>This will become a rounded image just like a profile pic</p>

img{   
  width: 400px; 
  height: 400px;  
  border: 10px double #b0e0e6; 
  transition-property: border, border-radius, transform; 
  transition-duration: 2s; 
  transition-timing-function: ease-in-out; 
}
img:hover { 
  border: 10px groove #00b7eb; 
  border-radius: 50%; 
  transform: scale(0.6); 
}
p{ 
  font-weight: bold;
  font-size: 20px;
}

HINWEIS: Sowohl Transform als auch Transition benötigen noch Browserunterstützung und Herstellerpräfixe. Auch wenn Chrome und Firefox beide Eigenschaften vollständig unterstützen, solltest du besondere Vorsicht walten lassen, wenn du die Vendor-Präfixe hinzufügst.

transform: rotate(40deg) 
-o-transform: rotate(40deg) 
-moz-transform: rotate(40deg) 
-webkit-transform: rotate(40deg); 
-ms-transform: rotate(40deg);

Dasselbe gilt auch für Transitionen.

Warum solltest du Transform und Transition nun benutzen?

CSS-Transformationen und Transitions mögen ein bisschen überwältigend erscheinen. Daher fragst du dich vielleicht, wie und warum du sie auf einer statischen Seite brauchst.

Sie tragen zur Schönheit einer Seite bei.
Sie machen die Seite dynamischer.
Sie machen eine Seite interaktiver.

Welche Elemente brauchen alles Transform und Transition?

Nicht alle Elemente benötigen visuelle Effekte, aber Komponenten wie Bilder und Buttons beteiligen sich an den am häufigsten verwendeten Transform- und Transitionseffekten. Visuelle Effekte erwecken diese beiden Elemente zum Leben und machen die Website wiederum für Besucher zugänglicher.

CSS-Transformationen und Transition