[CSS3] Würfel mit 'transform' erstellen

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

alogheo

Mitglied
22 Dezember 2010
694
2
18
23
zu Hause
wird unterstützt von:
Opera, Safari, Firefox, Chrome, Internet Explorer


1. Allgemeines

In diesem Tutorial werde ich euch erklären, wie man ein Würfel erstellt.

von diesem Würfel sind nur 3 Flächen sichtbar, d.h. wir brauchen 3 Container: top, right und front

HTML:
<div class="cube" id="top">
 Die Oberseite des Würfels
</div>
<div class="cube" id="right">
 Die rechte Seite des Würfels
</div>
<div class="cube" id="front">
 Die Vorderseite des Würfels
</div>
Diese haben alle die selbe Größe und befinden sich sich an der selben Position:
CSS
Code:
.cube
{
     position: absolute;
     left: 400px;
     top: 200px;
     background: #f00;
     width: 200px;
     height: 200px;
     padding: 20px;
     overflow: hidden;
     border: black solid 1px;
}
So, jetzt haben wir drei divs übereinander, aber von einem Würfel ist noch viel zu erkennen. Einen 3D-Effekt können wir mit transform (bzw. -moz-transform, -webkit-transform, –o-transform und -ms-transform, aber diese Vorsilben werde ich im Tutorial weglassen).

Die Syntax sieht so aus:
Code:
transform:
  funktion(parameter,param)
  funktion(parameter);

2. rotate()

Diese Funktion werden wir für unseren Würfel nicht brauchen, aber der Vollständigkeit halber werde ich sie trotzdem erklären.
mit rotate() kann man, wer hätte es gedacht, Elemente drehen. Das geht relativ einfach:
Code:
transform: rotate(45deg);
Dies würde ein Element um 45° im Uhrzeigersinn drehen. Um eine Element gegen den Uhrzeigersinn zu drehen muss der Angegebene Wert negativ sein. Der Ausgangspunkt für die Rotation ist standartmäßig der Mittelpunkt, kann aber auch manuell festgelegt werden


3. transform-origin

Syntax:
Code:
transform-origin: links oben;
Dabei stellen 'links' und 'oben' die Koordinaten für den Ursprung der Transformation dar, dies kann in Prozent, einer Längeneinheit oder mittels left/center/right bzw. top/center/bottom angegeben werden. {0 0} wäre die linke obere Ecke und {50% 0} wäre oben in der Mitte.


4. skew()

Mit skew kann ein Element scheren.
Die Syntax sieht so aus
Code:
transform: skew([I]x[/I]deg, [I]y[/I]deg);
/* bzw. einzeln */
transform:
    skewX([I]x[/I]deg)
    skewY([I]y[/I]deg);
Auch hier sind die Angaben Grad-Angaben. Der erste Parameter gibt die Scherung zur x-Achse, der zweite die Scherung zur y-Achse an. Wird nur der erste Parameter angegeben, dann bleibt die y-Achsen-Scherung 0.
Bei einem positiven Winkel wird das Element nach unten bzw. links geschert und bei einer negativen Angabe nach oben bzw. rechts.
Für unseren Würfel benötigen wir diese Funktion für den „3D-Effekt“.
Code:
#top /* Die Oberseite muss um 45° nach rechts geschert werden */
{
  transform: skewX(-45deg);
}
#right /* Die rechte Seite muss um 45° nach oben geschert werden */
{
  transform: skewY(-45deg);
}
Wenn man sich das jetzt anschaut, hat das ganze noch nicht viel von einem Würfel, #right und #top müssten noch i-wie verschoben werden.




5. translate()

Auch wieder als erstes die Syntax:
Code:
transform: translate([I]x[/I]px, [I]y[/I]px) ;
/* oder halt einzeln */
transform:
  translateX([I]x[/I]px)
  translateY([I]y[/I]px);
Der erste Parameter gibt an, wie weit das Objekt auf der x-Achse verschoben werden soll, der zweite wie viel auf der y-Achse. Ich habe leider noch nicht heraus gefunden, wie man errechnen kann, wie weit die Seiten, z.B. eines Würfels, verschoben werden müssen, damit er korrekt dargestellt wird. (Wenn es jmnd. weiß, bitte posten!)
Für #top empfiehlt es sich vorher den transform-origin auf bottom (Die Seite, die die Vorderseite berührt) zu setzen, dadurch muss das Objekt auf der y-Achse verschoben werden. Für unseren Würfel (mit einer Kantenlänge von 200px), beträgt diese Verschiebung 241px.

Code:
#top
{
  transform-origin: bottom;
  transform:
    translate(0, -241px)
    skewX(-45deg);
}
Für #right wäre transform-origin dann left und die verschiebung genau entgegengesetzt, also +241px auf der x-Achse
Code:
#right
{
  transform-origin: left;
  transform:
    translate(241px, 0)
    skewY(-45deg);
}
Jetzt muss die Kantenlänge von #top und #right nur noch halbiert werden



6. scale()

Syntax:
Code:
transform: scale([I]x[/I], [I]y[/I]);
/* bzw. */
transform:
  scaleX([I]x[/I])
  scaleY([I]y[/I]);
Diesmal sind die Parameter Zahlen, die den Streckungsfaktor angeben.
D.h.
Code:
transform: scale(1,1);
entspricht der Originalgröße
Code:
transform: scale(0.5,0.5);
ist halb so groß und
Code:
transform: scale(2,2);
währe doppelt so groß.

Bei unserem Würfel müssen wir bei #top die y-Achse halbieren und bei #right die x-Achse:

Code:
#top
{
  transform-origin: bottom;
  transform:
    translate(0, -241px)
    skewX(-45deg)
    scaleY(0.5);
}
#right
{
  transform-origin: left;
  transform:
    translate(241px, 0)
    skewY(-45deg)
    scaleX(0.5);
}
Fertig ist der Würfel!!
Wer sich nicht für die Matrix interessiert, kann gleich ans Ende des Tutorials springen, dort befindet sich ein link zu meinem Beispiel und einer wo man diese Angaben jetzt für den IE konvertieren kann.



7. matrix()

Und nun gibt es noch eine Möglichkeit, alles in einer Matrix anzugeben. Jetzt wird’s etwas komplizierter.
Also, jedes 3D-Objekt kann man in einer 3x3-Matrix darstellen:
Code:
a   c   e
b   d   f
0   0   1
Da wir aber kein richtiges 3D-Objekt haben, sondern alles nur 2D ist, fällt die untere Zeile praktisch raus, da sie immer die selben Werte hat. Übrig bleiben die ersten beiden Zeilen, die folgendermaßen in der matrix-Funktion angegeben werden:
Code:
transform: matrix(a, b, c, d, e, f);
Über diese Matrix wird das Skalarprodukt berechnet. Das Skalarprodukt erhält man, wenn man die Koordinaten der unterschiedlichen Punkte auf den einzelnen Achsen multipliziert und dann diese Ergebnisse addiert.
???????? *cunfused* ?????? Nicht verstanden? Schade! xD (Hab mir so viel Mühe gegeben ^^)
Also nehmen wir einmal an, wir haben zwei 2-Dimensionale Punkte mit den Koordinaten: P(5, 10) und Q(6, 15), dann wäre das Skalarprodukt 180. !...??? *Und wie ist der jetzt darauf gekommen?*
Die x-Koordinate des Punktes P ist 5 und die x-Koordinate des Punktes Q ist 6, wenn man diese beiden Zahlen miteinander multipliziert, erhält man 30.
Die y-Koordinate des Punktes P ist 10 und die y-Koordinate des Punktes Q ist 15, wenn man diese beiden Zahlen miteinander multipliziert, erhält man 150.
Und diese beiden Ergebnisse zusammenaddiert ergeben 180:



Noch einmal zurück zu unserer Matrix:
Code:
a   c   e
b   d   f
0   0   1
Angenommen, wir haben folgende Matrix:
Code:
1   5   3
10  4   9
0   0   1
(entspricht transform: matrix(1, 10, 5, 4, 3, 9); )
und ein Dreieck mit den Ursprungs-Koordinaten
Code:
A(0, 0, 1)
B(100, 50, 1)
C(30, 80, 1)
Um jetzt an z.B. die neue x-Koordinate von Punkt A zu kommen müssen wir den Wert der x-Koordinate mit dem Wert der ersten Zahl in der Matrix multiplizieren, den Wert der y-Koordinate mit dem der zweiten Zahl und das ganze mit der z-Koordinate und der dritten Zahl. Diese drei Ergebnisse müssen dann mit einander addiert werden, dann das ganze mit der Zeile etc.:


Dann erhalten wir für Punkt A: A(3, 9, 1):




Für Punkt B: B(353, 1209, 1):




Und für Punkt C: C(233, 929, 1):



Hoffe mal, dass ihrs verstanden habt ^^. Wenn nicht, dann noch mal nachfragen, oder einfach die obigen Funktionen verwenden.

Jetzt bleibt aber noch die Frage, wie man jetzt auf die einzelnen Zahlen der Matrix kommt, wenn man z.B. eine 45°-Rotation haben will.
Code:
scale(x,y) = matrix(x, 0, 0, y, 0, 0);
translate(x,y) = matrix(0, 0, 0, 0, x, y);
skew(x,y) = matrix(1, tan y, tan x, 1, 0, 0);
rotate(w) = matrix(cos w, sin w, -sin w, cos w, 0, 0);
Und um z.B. ein Objekt zu skalieren und zu drehen, müssen Werte an der selben Stelle angegeben werden, was nun?? Einfach die scale-Matrix mit der rotate-Matrix multiplizieren: Bsp:
Code:
transform: rotate(15deg) scaleX(0.8);





Für #top würde die Matrix demnach so aussehen:
Code:
1   -0.5   0
0    0.5   -241
0    0     1
also:
Code:
#top
{
  transform-origin: bottom;
  transform: matrix(1, 0, -0.5, 0.5, 0, -241);
}
und für #right
Code:
0.5   0   241
-0.5  1   0
0      0   1
also:
Code:
#right
{
  transform-origin: left;
  transform: matrix(0.5, -0.5, 0, 1, 241, 0);
}
Hinweis: beim verwenden der matrix() im FF muss bei den letzten beiden Parametern ein „px“ ergänzt werden ( also matrix(0.5, -0.5, 0, 1, 241px, 0); ).



Damit das ganze auch im IE funktioniert, kann man das ganze hier konvertieren: CSS3 Transform to Matrix Filter converter


Das fertige Beispiel: CSS3 - Würfel
 
Zuletzt bearbeitet:
Werbung: