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

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> 
<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
weitere eigene Projekte: