Ich versuche ein div zu einem Punkt zu drehen, indem ich css 3 transform rotiere.
Ich bin zu diesem Punkt gekommen: jsfiddle link
%Vor%Ich habe die "Lookat" -Funktion gegoogelt und nur etwas wie eine Lookat-Matrix gefunden.
Zunächst wird der Mittelpunkt Ihres Kreises nicht korrekt berechnet. Dein Kreis ist 120px breit und hoch, aber du "zentrierst" ihn, indem du seine obere und linke Seite auf scy - 50 setzt, wo du scy - 60 benutzt haben solltest (die Hälfte von 120px ist 60px). Oder noch besser, berechnen Sie auch Halbkreisbreite und -höhe dynamisch und subtrahieren Sie das, falls Sie Ihre Meinung ändern und es wieder zu einer anderen Größe machen.
Ich habe es einfach statisch gemacht:
%Vor% Zweitens möchten Sie den Winkel berechnen, den die .box -Elemente benötigen, um sich um ihre Mitte zu drehen, aber Sie verwenden ihre obere und linke Position, um dies zu tun. Das ist falsch.
Auch hier wäre dynamic besser, aber machen wir es erst einmal statisch:
%Vor% Dann bin ich mir nicht sicher, was du mit atan2() * 180 / Math.PI machst, da atan2 rads zurückgibt und du willst grad. Ich habe doppelt überprüft, wie ich zwischen den beiden berechnen soll. Es ist nicht so einfach, wie Sie dachten. Siehe diese Antwort .
Also habe ich eine Funktion hinzugefügt:
%Vor%Und es implementiert, bevor Sie den Winkel zurückgeben:
%Vor% Nun beginnen Grad von oben, dh wenn der Winkel 0 Grad beträgt, wird er nach oben zeigen, während Sie ihn aufgrund der Art der Berechnungen nach rechts zeigen müssen. Sie haben also + 90 zu Ihren endgültigen Rotationsberechnungen hinzugefügt.
Das wäre in Ordnung gewesen, wenn dein Punkt nach oben gegangen wäre, aber nicht. Es beginnt von unten links, das sind weitere 135 Grad. Fügen Sie diese hinzu, und Sie erhalten einen 225-Grad-Unterschied. Also:
%Vor%Und voila, dein Skript funktioniert: Ссылка
edit: funktioniert jetzt auch zum Ziehen
Tags und Links jquery css css3 css-transforms