Videos eBook Forum Kontakt

jetzt Videos kaufen
zum Lernen von HTML,
CSS und Webdesign

Jetzt das HTML-Seminar bestellen als
Video-Tutorial mit über 210 Videos:
von den Grundlagen bis zur fertigen Website
Video-Kurs HTML5, CSS & Webdesign

Video-Kurs bestellen HTML5, CSS & Webdesign
Video-Kurs bestellen HTML5, CSS & Webdesign

Vergrößern, verkleinern, skalieren von Elementen über den CSS3-Befehl transform: scale

Eine andere Form der Transformation ist das Skalieren, sprich das vergrößert, bzw. verkleinert Darstellen von Elementen. Dafür gibt es den CSS3-Befehl transform: scale(1.4)

Vergrößerte Darstellung eines Elements über CSS3-Befehl
Vergrößerte Darstellung eines Elements über CSS3-Befehl

Die Frage, warum man nicht gleich das Element in der gewünschten Größe ausgibt, ist durchaus berechtigt. Der Befehl zum Skalieren, wird durch Animationen richtig interessant. Daher hier erst die Grundlagen und später bei Animationen, dann richtig Spaß mit dieser CSS3-Anweisung.

Der Aufbau des Befehls ist sehr einfach. Unsere CSS3-Anweisung transform: wird nach dem Doppelpunkt mit der Eigenschaft scale erweitert. Jetzt kann noch 1, bzw. 2 Werte für den Faktor des Skalierens angegeben werden.

transform: scale(wert);
transform: scale(x, y);

Bei der Angabe von einem Wert, wird das Element gleichmäßig vergrößert bzw. verkleinert. X wie Y erhält den gleichen Faktor.

Es können aber auch beide Werte angegeben werden. Werden dabei 2 verschiedene Werte angegeben, erhalten wir beim Skalieren eine verzerrte Darstellung. Entweder in die Länge gezogen, oder plattgedrückt.

Wichtig ist:

  • kein Leerzeichen nach scale und vor der Klammer!
  • Nachkommawerte werden mit Punkt angegeben, z.B. 1.4 für eine 40% Vergrößerung.

Und auch hier die Angaben, wie bei den anderen transform-Befehlen für die alten Browserversionen

-webkit-transform: scale(1.4);
-moz-transform: scale(1.4);
-ms-transform: scale(1.4);
-o-transform: scale(1.4);
transform: scale(1.4);

Zum Testen der CSS-Befehle folgende Aufgabe

Aufgabe zum CSS3-Befehl transform: scale();

Bitte folgendes Aussehen nachbauen. Dabei soll die Karte 2 über transform: scale vergrößert darstellt werden. Um das Rad nicht neu zu erfinden, kann der Code für die allgemeine Darstellung der Karten verwendet werden.

Aufgabe zu transform: scale();
Aufgabe zu transform: scale();

Testen wie immer bei CSS3, in aktuellen Browsern, vorzugsweise Google Chrome. Wenn ein Vergleich gewünscht ist, unter der URL:
https://www.html-seminar.de/beispielcode/beispiel-css3-transform-scale.htm

Erweiterung der Aufgabe: Vergrößerung bei Mausberührung

Die Spielkarte soll vergrößert werden soll, sobald diese von der Maus überfahren wird.

Element vergrößern beim Überfahren mit der Maus
Element vergrößern beim Überfahren mit der Maus

Wer im Vorfeld die Reaktion testen möchte, kann dies über:
https://www.html-seminar.de/beispielcode/beispiel-css3-transform-scale-hover.htm