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
Sie befinden sich: Startseite » CSS lernen – Webdesign erstellen » Elemente umwandeln - transform: » Lösung zu skalieren

Aufgabenlösung zum CSS3-Befehl transform: scale();

In der Aufgabe soll folgendes Aussehen nachgebaut werden. Dabei soll die Karte 2 über transform: scale vergrößert darstellt 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

Um das Rad nicht neu zu erfinden, kann der bisherige Quellcode, für die allgemeine Darstellung, unserer Spielkarten Karten verwendet werden.

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">
  <title>CSS3 transform: scale</title>
  <link href="css3-transform-scale.css" rel="stylesheet">
</head>
<body>

<div id="box1" class="box">1</div>
<div id="box2" class="box">2</div>
<div id="box3" class="box">3</div>
<div id="box4" class="box">4</div>

</body>
</html>

Und unsere CSS-Datei mit dem Dateinamen css3-transform-scale.css

.box {
    position: absolute;
    top: 50px;
    height: 140px;
    width: 100px;
    border: 1px solid black;
    color: white;
    text-align: center;
    line-height: 140px;
    font-family: sans-serif;
    font-size: 65pt;
    font-weight: bold;
}
#box1 {
    background-color: orange;
    left: 50px;
}
#box2 {
    background-color: #e82d0c;
    left: 200px;
}
#box3 {
    background-color: #cc0aff;
    left: 350px;
}
#box4 {
    background-color: #c2e80c;
    left: 500px;
}

Lösung mit transform: scale(1.4);

Es wird nun der ID von #box2 die CSS-Anweisung scale(1.4) mitgegeben. Auch für alle alten Browserversionen.

#box2 {
    background-color: #e82d0c;
    left: 200px;
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -ms-transform: scale(1.4);
    -o-transform: scale(1.4);
    transform: scale(1.4);
}

Und somit passt das schon.

Erweiterung der Lösung mit Vergrößern bei Überfahren mit der Maus

Skalieren eines Elements bei einem Ereignis – wenn z.B. das Element von der Maus überfahren wird.

Hier bekommen wir einen ersten Eindruck, für was CSS3-transform-Befehle gut sind. Wir wollen dazu unser vorheriges Beispiel abändern, dass die Spielkarte vergrößert werden soll, die 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 mag, kann dies über
https://www.html-seminar.de/beispielcode/beispiel-css3-transform-scale-hover.htm

Dazu wird unser Befehl nicht mehr an die #box2 gepackt. Also hier erst mal unseren Quellcode bereinigen. Über die sogenannte Pseudoklasse :hover wird dann der Effekt angebracht.

Dazu wird unsere Klasse .box genutzt. Wenn also die Maus eine box berührt, dann soll etwas passieren. Was passiert, wird wie folgt im CSS definiert.

Als CSS-Code sieht das so aus:

.box:hover {
    ...

Vollständig sieht unser Code dann so aus:

.box {
    position: absolute;
    top: 50px;
    height: 140px;
    width: 100px;
    border: 1px solid black;
    color: white;
    text-align: center;
    line-height: 140px;
    font-family: sans-serif;
    font-size: 65pt;
    font-weight: bold;
}
.box:hover {
    -webkit-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -ms-transform: scale(1.4);
    -o-transform: scale(1.4);
    transform: scale(1.4);
}
#box1 {
    background-color: orange;
    left: 50px;
}
#box2 {
    background-color: #e82d0c;
    left: 200px;
}
#box3 {
    background-color: #cc0aff;
    left: 350px;
}
#box4 {
    background-color: #c2e80c;
    left: 500px;
}

Dies ist eine schöne Möglichkeit, eine Steuerung mit Feedback für Benutzer zu erstellen, oder eine Bildergalerie, die auf Mausberührung reagiert.

Weiterempfehlen • Social Bookmarks • Vielen Dank

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:

Vielen Dank für Ihre Hilfe

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details