Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt

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

Weiterempfehlen • Social Bookmarks • Vielen Dank

Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Fehler melden

Vielen Dank für Ihre Hilfe