CSS Transform
- 2D transform
- weitere transform Eigenschaften
- transform-origin
- 3Dtransform
- perspective
- perspective-origin
- backface-visibility
- rotierende Bilder
- transform-style: preserve 3d
- Javascript Animation
- Buch
- 3D Würfel
- Bilder Carousel
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);}
- translate()
- rotate()
- scale()
- skew()
- matrix()
- skewX()
- skewY()
- scaleX()
- scaleY()
Man kann auch mehrere Werte zuweisen;
transform:skew(30deg) scale(1.1,1.1) rotate(40deg) translate(10px, 20px);
| Eigenschaft | Wert | Beispiel | Code | Erklärung |
|---|---|---|---|---|
| transform | ||||
| translate() | translate(-10px,-20px) | Verschiebung horizontal, vertikal | ||
| rotate() | rotate(30deg) | Drehung | ||
| scale() | scale(1.5, 0.5) | Skalierung mit einem Multiplikator Wert | ||
| skew() | skew(0deg, 20deg) | Verzerrung auf x- und y- Achse. Hier wird die y-Achse um 20 Grad verdreht. | ||
| matrix() | matrix(1,-0.3,0,1, 0,0) | Hier werden folgende Eigenschaften in folgender Reihenfolge vereint: scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() Die skew-Werte werden nicht in Grad angegeben. Beispiel |
||
| skewX() | skewX(20deg) | Verzerrung der X Achse | ||
| skewY() | skewY(20deg) | Verzerrung der Y Achse | ||
| scaleX() | scaleX(0.5) | Skalierung Breite | ||
| scaleY() | scaleY(0.5) | Skalierung Höhe |
skew & matrix
Mit den skew-Werten kann man ein Element auch drehen: beide bekommen den gleichen Wert einer von beiden ist negativ (-minus). Das führt logischerweise aber auch zu einer Skalierung. Durch ausprobieren erschließt sich auch warum das so ist. Gibt man skewX 60deg ein sieht man, dass sich die y-Achse um diese Gradzahl dreht, aber auch länger wird, weil die Höhe nicht verändert wird.
Man sieht in dem Beispiel auch, was die skew Werte bei matrix für eine Bedeutung haben. Ein skewX Wert 1 würde die Y-Achse nur bis zur Hälfte der Breite verschieben.
Testen ist am Besten teste matrix bei w3schools
Da man mit matrix() auch Skew-Werte angeben kann, ist auch hier eine Drehung möglich.
siehe Beispiel
Animation
Man kann die Eigenschaften mittels transition animieren.
Weitere transform Eigenschaften
Es gibt einige transform Eigenschaften, die weiter unten anhand von Beispielen erläutert werden.
| Eigenschaft | Werte | Erklärung |
|---|---|---|
| transform | Weist einem Element eine 2D oder 3D transformation zu. | |
| transform-origin | x-Achse, y-Achse px, %, Schlüsselworte |
Ermöglicht die Einstellung des Ursprungspunktes / Mittelpunkt eines Elements. |
| perspective | px | Definiert den Focus der Perspektive oder wie stark sich ein Element perspektivisch verzerrt. |
| perspective-origin | x-Achse, y-Achse |
Ermöglicht die Positionierung des Fluchtpunkts. |
| transform-style | flat preserve-3d |
Definiert ob die Perspektive Eigenschaften an Nachfahren Elemente weitergegeben wird. |
| backface-visibility | visible hidden |
Definiert, ob die Rückseite als gespiegelte Vorderseite erscheint oder gar nicht sichtbar ist |
Transform Origin
Siehe dazu w3schools
Man kann den Ursprungspunkt bestimmen. Ein Objekt wird um diesen Ursprungspunkt gedreht oder auch skaliert. Er liegt standardmäßig in der Mitte des Objekts und wird über x-Achse und zweitens y-Achse definiert.
Der Standardwert ist 50% 50%; Setzt man die beiden Werte auf 0% so ist der Drehpunkt oben links.
transform-origin:20% 40%;
Setzt man die Werte in Pixeln sind die Standardwerte: die halbe Breite und halbe Höhe der original Größe.
In 3D transform, kann man auch für die z-Achse Werte setzen.
Auf w3schools kann man das auf dieser Seite testen.
Außerdem gibt es Schlüssworte.
| Eigenschaft | x-Achse | y-Achse | Info |
|---|---|---|---|
| transform-origin | % | % | Mitte ist 50% 50% |
| px | px | Die Mitte ist die halbe Breite, halbe Höhe | |
| left | top | left top, entspricht 0% 0%, linke obere Ecke | |
| center | center | Mitte horizontal und vertikal | |
| right | bottom | rechte Seite, unter Kante |
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/
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
so sieht's aus mit perspective und Fluchtpunkt
| Eigenschaft | Wert | Beispiel | Erklärung |
|---|---|---|---|
| transform | rotate3d | rotate3d(x,y,z,Winkel) | x,y,z definiert die Achse, mit einem Wert zwischen 0 und 1, der vierte Wert definiert den Winkel. rotate3d(0,1,0,70deg) dreht es auf der y-Achse um 70 Grad. Beispiel siehe auch dieses Beispiel |
| rotateX | rotateX(30deg) | Winkel auf der horizontalen Achse | |
| rotateY | rotateY(30deg) | Winkel auf der vertikalen Achse | |
| rotateZ | rotateZ(30deg) | Winkel auf der Z-Achse | |
| translate3D | translate3d(10px,0,20px) | Verschiebt ein Objekt auf den 3 Achsen x, y, z. Einheiten: px, rem, em |
|
| translateX | translateX(-20px) | Verschiebung auf der horizontalen | |
| translateY | translateY(20px) | Verschiebung auf der Vertikalen | |
| translateZ | translateZ(10rem) | Verschiebung auf der Z-Achse | |
| scale3d | scale3d(1,2,1) | Skalierung auf den Achsen x, y, z mit einem Multiplikator. In diesem Beispiel wird das Objekt in der Höhe verdoppelt. | |
| scaleX | scaleX(0.5) | Skalierung in der Breite | |
| scaleY | scaleY(1.5) | Salierung in Höhe | |
| scaleZ | scaleZ(2) | Skalierung auf der Z Achse | |
| perspective | perspective(100px) | Die Perspektive oder der Focus eines einzelnen Elements. Je kleiner der Wert, desto größer die perspektivische Verzerrung. |
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.
#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>
Ohne die Zuweisgung von perspective werden die Elemente nur in einer unnatürlichen Parallelperspektive dargestellt.
so sieht's aus ohne perspective
Um eine reale perspektivische Verzerrung zu erhalten, muss man entweder dem Elternelement eine perspective Eigenschaft zuweisen, oder dem Element selber einen transform: perspective() Wert. Ein Fluchtunkt für den perspektivischen Mittelpunkt ist möglich. perspective-origin erwartet x- und y-Koordinate .
perspective: 800px;so sieht's aus mit perspective und Fluchtpunkt
perspective-origin: 50% 100px;
perspective
Es ist aber auch möglich einem einzelnen Element eine Perspektive Eigenschaft zuzuweisen. Das ist für ein einzelnes Element sehr praktisch, aber ungeeignet, wenn mehrere Elemente einen gemeinsamen Fluchtpunkt besitzen sollen.
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 | fertiges 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);
}
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.
transform-style: 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
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');
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.
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.
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.
Es gibt einen Container mit perspective Eigenschaften, darin gibt es eine quadratische Fläche in gleicher Größe wie der Container. Klasse .cube. Darin befindet sich ein figure Element welches gedreht wird und um die Hälfte der Breite oder Höhe verschoben wird. In dem Vorbereitungsbeispiel gibt es 6 dieser Objekte, mit jeweils einer Außenseite. Im endgültigen Beispiel hat man alle Seiten ein einem Objekt.
Vorbereitung Beispiel / Würfel
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 | Cube 4 | Cube 5
Carousel
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 | Carousel 4
Fade Gallery ein andere Art von Bildergalerie mit Greensock Animation.
U-Boot
In diesem Beispiel hab ich animiertes U-Boot erstellt. Die beiden Propeller sind in dem U-Boot als HTML Elemente verschachtelt. Das Propeller-Bild wird permanent um die Z-Achse gedreht. Das Div Element, in dem sich dieses rotierende Propeller-Bild befindet, wird um die Y-Achse gedreht.