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](bilder/css3-transform-origin-aufgabe.jpg)
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](bilder/css3-transform-origin-aufgabe-2.jpg)
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](bilder/css3-transform-origin-aufgabe-3.jpg)
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](bilder/css3-transform-origin-aufgabe-z-index.jpg)
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 :).
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.deE-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.
Mehr Details
-