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: » Aufgabenlösung transform-origin

Lösung Aufgabe zu transform-origin

Wir basteln uns ein Kartenspiel mit transform-origin und transform: rotate()

Aufgabe zu transform-origin
Aufgabe zu transform-origin

Um nicht das Rad neu zu erfinden, nutzen wir den Quellcode, der bereits im letzten Kapitel zur Anzeige der Karten entstanden ist.

HTML:

<!DOCTYPE html> 
<html lang="de"> 
<head>
  <meta charset="UTF-8"> 
  <title>CSS3 Beispiel transform-origin</title> 
  <link href="css3-transform-origin.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 im CSS-Bereich:

.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;
    -moz-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
}
#box2 {
    background-color: #e82d0c;
    left: 200px;
    -moz-transform: rotate(70deg);
    -ms-transform: rotate(70deg);
    -o-transform: rotate(70deg);
    -webkit-transform: rotate(70deg);
    transform: rotate(70deg);
}
#box3 {
    background-color: #cc0aff;
    left: 350px;
    -moz-transform: rotate(150deg);
    -ms-transform: rotate(150deg);
    -o-transform: rotate(150deg);
    -webkit-transform: rotate(150deg);
    transform: rotate(150deg);
}
#box4 {
    background-color: #c2e80c;
    left: 500px;
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

Im Gegensatz zur letzten Aufgabe, liegen alle Boxen übereinandern. Was wir jetzt nicht mehr benötigen, ist der Abstand von links, bei den einzelnen IDs – es reicht nun eine Abstandangabe, bei der Klasse 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;
    left: 200px;
}
#box1 {
    background-color: orange;
    -moz-transform: rotate(15deg);
    -ms-transform: rotate(15deg);
    -o-transform: rotate(15deg);
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
}
#box2 {
    background-color: #e82d0c;
    -moz-transform: rotate(70deg);
    -ms-transform: rotate(70deg);
    -o-transform: rotate(70deg);
    -webkit-transform: rotate(70deg);
    transform: rotate(70deg);
}
#box3 {
    background-color: #cc0aff;
    -moz-transform: rotate(150deg);
    -ms-transform: rotate(150deg);
    -o-transform: rotate(150deg);
    -webkit-transform: rotate(150deg);
    transform: rotate(150deg);
}
#box4 {
    background-color: #c2e80c;
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

Wenn wir uns jetzt die Vorschau ansehen, sehen wir alle Karten übereinander liegen – durch die alte Drehung, sind noch die Ecken der unteren Karten sichtbar.

Kartenstapel über CSS3
Kartenstapel über CSS3

Allerdings wollen wir den Drehpunkt festlegen. Da dieser für alle Karten gelten soll, können wir diesen in unserer Klasse .box mitgeben.

.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;
    left: 200px;
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}
Lösung für Aufgabe zu transform-origin
Lösung für Aufgabe zu transform-origin

Erweiterung Aufgabe: bestimmte Box im Vordergrund

Wir wollen nun, dass die Karten 1 und 3 oben liegen. Hier wird der allgemeine CSS-Befehl z-index verwendet.

Aufgabe: in unserem Kartenspiel soll 1 und 3 oben liegen
Aufgabe: in unserem Kartenspiel soll 1 und 3 oben liegen

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