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

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>
<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.