CSS Transform

Es gibt 2D- und 3D Transform Eigenschaften mit denen man Elemente drehen, verzerren und im 3D Raum positionieren und transformieren kann.

Siehe dazu w3schools 2D Transform | w3schools 3D Transform | Can I use CSS 3D | bradshawenterprises| 24 ways to impress your friends

Siehe mein Videotutorial bei youtube

2D Transform

Man weist der Eigenschaft transform verschiedene Methoden zu. Anhand der Beispiele kann man schnell erkennen wie es funktioniert. Die matrix() Methode ist allerdings etwas komplizierter.

.box3{transform: scale(1.5, 0.5);}

 

so sieht's aus

Man kann auch mehrere Werte zuweisen;

 transform:skew(30deg) scale(1.1,1.1) rotate(40deg) translate(10px, 20px);

Man kann die Eigenschaften mittels transition animieren.

so sieht's aus

Transform Origin

Siehe dazu w3schools

Man kann den Mittelpunkt oder Drehpunkt versetzen.

transform-origin:20% 40%;

Der Standardwert ist 50% 50%; Setzt man die beiden Werte auf 0% so ist der Drehpunkt oben links. Auf w3schools kann man das auf dieser Seite testen.

Außerdem gibt es Schlüssworte.

3D Transform

Siehe auch mein Videotutorial CSS3 transform 3D
Siehe auch http://24ways.org/2010/intro-to-css-3d-transforms/
Siehe auch 3D Effekte Flip Box http://css-flip-box-3d.firchow.net/

Schnellstart

Das Elternelement bekommt die Eigenschaft perspective: 800px; und eventuell noch die Koordinaten für einen Fluchtpunkt perspective-origin: 50px 100%:
Das Kindelement bekommt eine oder mehrere 3D Transform- Eigenschaften.

CSS
#wrap {
perspective: 800px;
perspective-origin: 50% 100px;
}
#wrap img {
transform: rotateY(180deg);
}
HTML
<div id="wrap">
	<img src="img/buch/book12.jpg" alt="Buchseite">
</div>

so sieht`s aus


3D CSS Transforms funktioniert ähnlich wie 2D Transforms. Die wesentlichen Eigenschaften sind:
translate3d, scale3d, rotateX, rotateY, rotateZ
translate3d and scale3d benötigen 3 Argumente. Die rotate Eigenschaften erwarten einen Winkel in Grad z.B: 20deg
Sofern man keine Perspektive definiert hat, sieht es unspektakulär aus.
so sieht's aus ohne perspective

Um eine reale perspektivische Verzerrung zu erhalten, muss man dem Elternelement einen perspective Wert und einen Punkt für den perspektivischen Mittelpunkt zuweisen. perspective-origin erwartet x- und y-Koordinate .

perspective: 800px;
perspective-origin: 50% 100px;
so sieht's aus mit perspective und Fluchtpunkt

perspective

Es ist aber auch möglich einem einzelnen Element eine Perspektive Eigenschaft zuzuweisen. Das ist für ein einzelnes Element sehr praktisch, aber wenn mehrere Elemente benutzt werden, eher ungeeignet, da sie keinen gemeinsamen Fluchtpunkt besitzen.

transform: perspective(500px);

Der Perspektive Wert bestimmt die Intensität des 3D Effekts. Am besten man stellt es sich als Entfernung des Beobachters zum Objekt vor. Je größer der Wert, desto weiter die Entfernung und desto schwächer der perspektivische Verzerrungs Effekt. Der Wert 2000 erzeugt den Eindruck, wir würden ein Objekt in weiter Ferne beobachten. Der Wert 100 führt dazu, als hätten wir das Objekt direkt vor unseren Augen. Der visuelle Effekt ist enorm.

perspective-origin

Der Fluchtpunkt wird durch perspective-origin bestimmt. Es werden ein horizontaler und ein vertikaler Wert erwartet: perspective-origin: 25% 50%;

Hier kann man die Werte testen.

backface-visibility

Mit dieser Eigenschaft kann man die Rückseite unsichtbar machen.

backface-visibility: hidden;
backface-visibility: visible;

so sieht's aus | nächstes Beispiel

Rotierende Bilder

Es folgt ein komplexeres Beispiel, welches aus Vordergrund und Hintergrund besteht.

Im folgenden Beispiel haben wir ein Bild, welches sich dreht und dessen Rückseite anders aussieht als die Vorderseite. Das Ganze wird folgendermaßen erzeugt. Wirklichkeit haben wir 2 Bilder. Das erste Bild wird mit position:absolute über das zweite gelegt. Wenn man eine Positionierung mit left, right, bottom, top nicht setzt, bleibt das Element an der Stelle, wo es ist, links oben in der Ecke, des Elternelements.

Bei beiden, ist backface-visibility auf hidden eingestellt. Das bedeutet, dass das Bild bei einer 180 Grad Drehung unsichtbar wird. so sieht's aus Das zweite Bild wird schon beim Start auf 180 gedreht und ist somit unsichtbar. Wenn nun beide Bilder um 180Grad gedreht werden, wird das erste Bild unsichtbar und das zweite Bild sichtbar.

Das HTML sieht folgendermaßen aus.

<div id="container">
  <div id="karte" class="shadow">
    <div class="face"> <img src="img/b3.jpg"></div>
    <div class="back"><img src="img/b4.jpg"> </div>
  </div>
</div>

Im umgebenden Div "container" werden die Perspektive Eigenschaften definiert.
Darin befindet sich das Div "karte". Es ist der Container, der sich mittels transition um 180 Grad dreht.
Darin befdinden sich die beiden Divs mit den Bildern. Sie werden mit Position absolute übereinander gelegt. Das zweite Bild wird schon beim Start um 180 Grad gedreht.

#container {
margin: 10px auto;
width: 400px;
height: 300px;
perspective: 800px;
perspective-origin: 100% -50%;
}
#karte {
transform-style: preserve-3d;
transition: all 1s linear;
}
#container:hover #karte {
transform: rotateY(180deg);
box-shadow: -5px 5px 5px #aaa;
}
.face {
position: absolute;
backface-visibility: hidden;
}
.back {
transform: rotateY(180deg);
}

so sieht's aus

preserve-3d und position: absolute;

Es ist in diesem Falle auch nicht nötig das Elternelement oder einen Vorfahren auf position: relative; zu setzen. Selbst wenn es mit top, left, bottom oder right positioniert wäre, würde es sich am Elternelement ausrichten, da dieses transform-style: preserve-3d; bekommen hat. Anscheinend wird position: absolute auch durch preserve-3d beeinflusst.

preserve 3d

transform-style: preserve-3d;

Es gibt ein Elternelement, wo Persepektive und Fluchtpunkt bestimmt werden. Darin befinden sich Kindelemente, welche diesen Optionen entsprechend dargestellt werden. Diese Perspektiv Eigenschaften werden aber standardmäßig nicht an weitere Nachfahren vererbt. transform-style: preserve-3d; weist man dem Kindelement zu. Dadurch erhalten auch die Enkelkinder die Perspektive Eigenschaften.

Rotation mit Javascript

www.w3schools

Man kann Elementen CSS Werte per Javascript zuweisen. Die Problematik mit den Browserpräfixen wird auf folgender Seite gelöst und erläutert. javascriptkit Ich habe darauf verzichtet, von daher werden die folgenden Beispiele nicht in jedem Browser funktionieren.

Ich habe eine andere Lösung erstellt und zwar erzeuge ich eine neue Klasse und füge hier die CSS Eigenschaften rotateY und box- shadow mit neuen Werten hinzu.

.drehung{
transform: rotateY(180deg);
box-shadow: -5px 5px 5px #aaa;
}

In Javascript weise ich diese Klasse dem HTML Element mit der id "karte" als Attribut zu. Siehe dazu meinen Javascript Tipp "Dom Attribute setzen" Eine Klasse ist letztendlich auch ein Attribut eines HTML Elements. Der Wert ist der Klassenname.

document.getElementById('karte').setAttribute('class', 'drehung');

so sieht's aus

Hier eine zweite Lösung, wobei die transform Eigenschaft per Javascript geändert wird. Beachten Sie auch wie ich die Gradzahl um jeweils 180 erhöhe.

so sieht's aus

Im nächsten Beispiel werden nacheinander Bilder hinzugefügt.

Ich habe eine Zählvariable namens "nr", die bei jedem Click um 1 erhöht wird und zwar so viele male, wie es Bilder gibt. Am Ende wird sie wieder auf 0 gesetzt. Die URLs der Bilder habe ich einem Array hinterlegt. Es ist ein bisschen kompliziert, da mal das erste Bild mal das zweite Bild im Vordergrund liegt.

Mittels modulo frage ich ab, ob nr eine gerade Zahl ist. Dadurch kann ich kontrollieren, welches Bild zuerst erhöht werden muss. Auch die Gradzahl für rotateY wird mittels der Zählvariablen erhöht. Am Ende angekommen wird nr wieder auf 0 gesetzt, so dass auch die Rotation mehrmals rückwärts läuft. Das ist ein ganz netter Nebeneffekt, der sich zwangsläufig eingestellt hat.

so sieht's aus

Im folgenden Beispiel habe ich eine durchlaufende Anzeige erstellt.

so sieht's aus | responsive mit mit Click aufs Bild | vor und zurück |

ein bisschen komplizierter aber cool

Buch

In den folgenden Beispielen wird Schritt für Schritt ein Buch erstellt, mit Seiten zum Umblättern. Schauen Sie sich den Quelltext an. Die Beispiele bauen aufeinander auf.

Ändere im ersten Beispiel die Werte für figure.front. Verschiebe das Element nach vorne, hinten, oben und unten und drehe es um eine Achse. Dadurch bekommt man ein gutes Gefühl wie das Ganze funktioniert.

Gedreht wird immer der Block mit id buch, je nachdem wie man das darin liegende Element verschiebt, bekommt man einen andere Ansicht und einen anderen Drehwinkel.

buch 1 | buch 2 | buch 3 | buch 4 | buch 5 | buch 6

3D Cube

Siehe dazu diesen Tipp in English http://24ways.org/2010/intro-to-css-3d-transforms/ wo alles sehr schön erklärt wird.

Und dieses komplexere Beispiel eleqtriq.

Zu Anfang sollte man sich das erste Buchbeispiel anschauen. Dann kann man auf die Art einen Würfel erzeugen.

so sieht`s aus

Erklärung:

Die schwarze Fläche in der Mitte ist #cube. Die Flächen werden gedreht und anschließend verschoben. #cube .back { transform: rotateX(180deg) translateZ(100px); }
Da der Conainer 200 Pixel Breite hat, werden sie um 100 Pixel verschoben, so dass sie an den Außenkanten liegen und so einen Würfel bilden. Auf der Seite 24ways.org ist das sehr schön erklärt und anhand von anschaulichen Animationen verdeutlicht.

Cube 2 | Cube 3

Ich verzichte hier auf Erklärungen, weil das auf http://24ways.org/2010/intro-to-css-3d-transforms/ schon ausreichend geschehen ist. Ich habe hier eine Javascript Lösung erstellt, da man dabei nur an 2 Stellen die Größe und in Javascript die Anzahl ändern muss.

Carousel 1 | Carousel 2 | Carousel 3 |

Fade Gallery ein andere Art von Bildergalerie mit Greensock Animation.