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

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

Für die Aufgabe mit skew, wollen wir folgendes Design nachbauen.

Aufgabe zu CSS3-Befehl transform: skew
Aufgabe zu CSS3-Befehl transform: skew
  • Die 2. Spielkarte ist nur windschief, es ist also nur der Wert X geändert
  • bei der 3. Karte sind X und Y gleichermaßen verändert
  • bei der 4. Karte unterscheiden sich die Angaben zwischen X und Y

Testen wie immer bei CSS3, in aktuellen Browsern, vorzugsweise Google Chrome.

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: skew - Aufgabenlösung</title>
  <link href="css3-transform-skew.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-skew.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: skew

Mit obigen Quellcode haben wir jetzt unsere 4 Boxen nebeneinander. Die zweite Box wollen wir nun in die X-Richtung neigen. Also schnappen wir uns im CSS nun die ID #box2.

skewX versus skew

Hier können wir jetzt mit 2 verschiedenen Anweisungen vorgehen:

transform: skew(20deg);
transform: skewX(20deg);

Der Effekt ist im Ergebnis der Gleiche. Die erste Anweisung gibt eigentlich als ersten Wert X und als zweiten Wert Y mit. Wird kein Y mitgegeben, wird dafür 0 gesetzt. Somit ist also die Angabe skew(20deg, 0deg); identisch mit skewX(20deg);

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

Wichtig ist, dass kein Leerzeichen nach skew (bzw. skewX) kommt.

skewY versus skew

Dasselbe machen wir nun für die Box3. Diese ist in Y-Richtung schief. Auch hier haben wir 2 Befehle zur Auswahl:

transform: skew(0, 20deg);
transform: skewY(20deg);

Bei einem Winkel von 0 Grad wird keine Einheitsangabe benötigt (stört aber auch nicht, wenn diese vorhanden wäre). Im folgenden Code wird skew verwendet:

#box3 {
    background-color: #cc0aff;
    left: 350px;
    -webkit-transform: skew(0, 20deg);
    -moz-transform: skew(0, 20deg);
    -ms-transform: skew(0, 20deg);
    -o-transform: skew(0, 20deg);
    transform: skew(0, 20deg);
}

Und die Box 4 wird sowohl in X- wie in Y-Richtung um 20 Grad geneigt.

#box4 {
    background-color: #c2e80c;
    left: 500px;
    -webkit-transform: skew(20deg, 20deg);
    -moz-transform: skew(20deg, 20deg);
    -ms-transform: skew(20deg, 20deg);
    -o-transform: skew(20deg, 20deg);
    transform: skew(20deg, 20deg);
}

Das war die Lösung.

Auch diese transform-Funktion wird bei Animationen sehr interessant. CSS3-Animationen kommen in einem der folgenden Kapitel.

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