rotate3d Kurzschrift

rotateX(50deg) entspricht rotate3d(1, 0, 0, 50deg)

rotateY(20deg) entspricht rotate3d(0, 1, 0, 20deg)

rotateZ(15deg) entspricht rotate3d(0, 0, 1, 15deg)

Also ...

rotateX(50deg) rotateY(20deg) rotateZ(15deg)

entspricht

rotate3d(1, 0, 0, 50deg) rotate3d(0, 1, 0, 20deg) rotate3d(0, 0, 1, 15deg)

Für ein generisches rotate3d(x, y, z, α) haben Sie die Matrix

wo

Sie erhalten nun die Matrizen für jede der 3 rotate3d Transformationen und Sie multiplizieren sie. Und die resultierende Matrix ist die Matrix, die der resultierenden einzelnen rotate3d entspricht. Nicht sicher, wie einfach es ist, die Werte für rotate3d daraus zu extrahieren, aber es ist sicher einfach, diese für ein einzelnes matrix3d zu extrahieren.

Im ersten Fall ( rotateX(50deg) oder rotate3d(1, 0, 0, 50deg) ) haben Sie:

x = 1 , y = 0 , z = 0 , α = 50deg

Also ist die erste Zeile der Matrix in diesem Fall 1 0 0 0 .

Der zweite ist 0 cos(50deg) -sin(50deg) 0 .

Der dritte 0 sin(50deg) cos(50deg) 0 .

Und der vierte ist offensichtlich 0 0 0 1 .

Im zweiten Fall haben Sie x = 0 , y = 1 , z = 0 , α = 20deg .

Erste Zeile: cos(20deg) 0 sin(20deg) 0 .

Zweite Reihe: 0 1 0 0 .

Dritte Zeile: -sin(20) 0 cos(20deg) 0 .

Vierte: 0 0 0 1

Im dritten Fall haben Sie x = 0 , y = 0 , z = 1 , α = 15deg .

Erste Zeile: cos(15deg) -sin(15deg) 0 0 .

Zweite Zeile sin(15deg) cos(15deg) 0 0 .

Und die dritte und die vierte Zeile sind 0 0 1 0 bzw. 0 0 0 1 .

Hinweis : Sie haben vielleicht bemerkt, dass die Vorzeichen der sin-Werte für die rotateY-Transformation anders sind als für die anderen beiden Transformationen. Es ist kein Rechenfehler. Der Grund dafür ist, dass Sie für den Bildschirm die Y-Achse nach unten und nicht nach oben zeigen.

Dies sind also die drei 4x4 Matrizen, die Sie multiplizieren müssen, um die 4x4 Matrix für die resultierende einzelne rotate3d Transformation zu erhalten. Wie ich gesagt habe, bin ich mir nicht sicher, wie einfach es sein kann, die 4 Werte herauszubekommen, aber die 16 Elemente in der 4x4 Matrix sind genau die 16 Parameter des matrix3d Äquivalents der verketteten Transformation.

BEARBEITEN :

Es stellt sich heraus, dass es ziemlich einfach ist ... Sie berechnen die Spur (Summe der diagonalen Elemente) der Matrix für die rotate3d -Matrix.

4 - 2*2*(1 - cos(α))/2 = 4 - 2*(1 - cos(α)) = 2 + 2*cos(α)

Sie berechnen dann die Kurve für das Produkt der drei 4x4 Matrizen, Sie setzen das Ergebnis mit 2 + 2*cos(α) gleich, das Sie α extrahieren. Dann berechnen Sie x , y , z .

In diesem speziellen Fall, wenn ich richtig berechnet habe, wird die Spur der Matrix, die sich aus dem Produkt der drei 4x4 -Matrizen ergibt, sein:

Also cos(α) = (T - 2)/2 = T/2 - 1 , was bedeutet, dass α = acos(T/2 - 1) .

Syntax:

Werte:

• %Code% Ist ein x , das die x-Koordinate des Vektors beschreibt, der die Rotationsachse bezeichnet.
• %Code% Ist ein <number> , das die y-Koordinate des Vektors beschreibt, der die Rotationsachse bezeichnet.
• %Code% Ist ein y , das die z-Koordinate des Vektors beschreibt, der die Rotationsachse bezeichnet.
• %Code% Ist <number> für den Rotationswinkel. Ein positiver Winkel bezeichnet eine Drehung im Uhrzeigersinn, ein negativer Winkel eine Drehung im Gegenuhrzeigersinn.

Wie in:

Fiedelte hier

Machen Sie es hier

Weitere Dokumente

Hängt davon ab, was Sie versuchen, könnte dieser "Hack" Ihnen helfen. Angenommen, Sie führen eine Animation aus, und Sie möchten eine Transformation nach der Transformation usw. hinzufügen, und Sie möchten nicht, dass das CSS so aussieht, als würde es Hunderte von Transformationen ausführen:

Dies funktioniert in Chrom:  1. Wenden Sie die gewünschte Transformation auf ein Element an.  2. Wenn Sie das nächste Mal eine Transformation hinzufügen möchten, fügen Sie sie der berechneten Transformation hinzu:     "window.getComputedStyle (element) .transform" - aber stellen Sie sicher, dass Sie die neue Transformation nach links setzen.  3. Nun würde Ihre Transformation wie folgt aussehen: "rotateZ (30deg) matrix3d ​​(......).  4. Wenn Sie das nächste Mal eine weitere Transformation hinzufügen möchten, wiederholen Sie den Vorgang - Chrome reduziert die Transformationen immer auf die Matrix3d-Notation.

TL; DR- Wenden Sie die von Ihnen gewünschten Transformationen an und rufen Sie dann die berechnete matrix3d-Transformation ab.

Mit diesem Trick können Sie auch schnell (dh ohne selbst mathematisch zu arbeiten) eine Funktion erstellen, die ein Objekt in Bezug auf Ihren Referenzrahmen in eine beliebige Richtung dreht. Siehe das folgende Beispiel:

BEARBEITEN : Ich habe auch xyz-Übersetzungen hinzugefügt. Auf diese Weise wäre es sehr einfach, Objekte in bestimmten 3D-Positionen mit bestimmten Orientierungen zu platzieren. Oder ... stell dir einen Würfel vor, der springt und seine Spinachse mit jedem Sprung ändert, je nachdem, wie er landet!

Der genaue Wert ist rotate3d(133,32,58,58deg)

Siehe die Geige (Für Chrome und Safari mit -webkit-transform)