Wie dreht man ein Element um eine andere Linie als X=0,Y=0 und Z=0 mit CSS3?

Question

Ich habe diese Seite zum besseren Verständnis der Frage. Wie Sie sehen können, können wir mit CSS3 ein Element um die X-, Y- oder Z-Achse drehen, indem wir transform: rotate[XYZ](M deg/rad) .

Aber ich suche nach einer Funktion, mit der ich das Element auf einer beliebigen Linie drehen kann. Zum Beispiel das Drehen des Elements auf x=y Linie. oder noch komplexer y=2x+3 .

Wenn Sie es nicht verstehen, halten Sie bitte ein Papier in der Hand und drehen Sie es an den beiden äußeren Ecken um (für y=x o y=-x ). oder sehen Sie sich dieses Bild an.

Ich vermute, dass es sich um eine Kombination aus zwei Drehungen handelt, aber ich weiß nicht, wie ich die Drehungen berechnen soll.

Aktualisierung:

Ich wusste nicht, dass es eine rotate3d Funktion für CSS transform . diese Funktion nimmt vier Argumente entgegen rx , ry , rz y deg . Ich denke, das wäre sehr hilfreich für dieses Problem.

Eine andere Sache ist, wenn wir die translate[X,Y,Z] es ändert tatsächlich den Ursprung der Drehung. Das heißt, wenn Sie sich um die folgenden Punkte drehen wollen Y=10px sollten Sie die translateZ a 10px

Update2:

Mein eigentliches Ziel ist es, ein Werkzeug zur Anwendung von CSS-Transform-Eigenschaften über eine GUI zu erstellen. Ich möchte es erweitern, um was auch immer transform was Sie tun können. Eine davon ist die Rotation. Ich bin sicher, dass es möglich ist, ein Element um andere Linien zu drehen als x=0 ... aber ich weiß nicht, wie ich die Berechnung durchführen kann. Zum Beispiel Drehung 45 Grad um Y und 45Grad um Z ist dasselbe wie eine Drehung von 45 Grad um x=y . Ich brauche eine Lösung für alle Linien im Raum.

Answer 1

Ich empfehle, die Einleitung des Artikels zu lesen Drehung um eine beliebige Achse in 3 Dimensionen . Die Grundlagen sind:

(1) Translate space so that the rotation axis passes through the origin.
(2) Rotate space about the z axis so that the rotation axis lies in the xz plane.
(3) Rotate space about the y axis so that the rotation axis lies along the z axis.
(4) Perform the desired rotation by  about the z axis.
(5) Apply the inverse of step (3).
(6) Apply the inverse of step (2).
(7) Apply the inverse of step (1).

Answer 2

Die Lösung für die Frage, die ich stelle, ist die Funktion css transform, rotate3d . Mit dieser Funktion können wir die DOM-Elemente um jede beliebige Linie im 3D-Raum drehen.

Diese Funktion akzeptiert vier Argumente, von denen die ersten drei folgende sind x , y y z und die letzte ist die Rotation. Wenn ich verstehe, wie diese Funktion funktioniert, können Sie Ihre lineare Algebra-Funktion übersetzen in rotate3d wie diese:

Wenn Sie eine Zeilenfunktion wie 1x + 2y + 3z = 0 und möchten Sie Ihr Element um 30 Grad drehen, dann sollten Sie diese CSS-Eigenschaft auf das Element anwenden; transform: rotate3d(1, 2, 3, 30deg); .

Ich habe erstellt este kleine Anwendung zur Demonstration, wie rotate3d funktioniert.

Answer 3

Ich glaube, ich verstehe, was Sie meinen. Wenn Sie Photoshop kennen, können Sie beim Drehen eines Bildes einen Ankerpunkt wählen. Das ist die gleiche Idee. Sie fügen also den Code Rotationspunkt: 50% 50% in die Klasse ein. Das einzige Problem ist, dass der Rotationspunkt noch nicht von allen Browsern akzeptiert wird, aber das wird bald der Fall sein. Ich dachte, Sie sollten wissen, dass dies irgendwann eine Möglichkeit sein wird. ici für mehr