Ich versuche, ein Bild mit einer CSS Transformation so zu drehen, dass es innerhalb der umgebenden div korrekt ausgerichtet bleibt, dh die obere linke Ecke des Bildes sollte mit der oberen linken Ecke von div ausgerichtet sein. .
Wie Sie hier sehen können (- & gt; klicken Sie auf [rotate] ), funktioniert das nicht. Gibt es eine Möglichkeit, das zu beheben?
(Ich würde dies in einem Online-Bildbetrachter verwenden, so dass ich keinen Offset für das gedrehte Bild fest codieren kann. Es gibt viele ähnliche Fragen, aber ich habe diese genaue Frage nicht gefunden.)
Wenn Sie möchten, dass es in CSS gemacht wird, ist dies der Weg:
%Vor%Der Trick besteht darin, das Bild um die linke untere Ecke zu drehen. Sobald es fertig ist, ist es um 100% der Höhe herunter; übersetze es und jetzt ist es in Ordnung.
Um den gleichen Effekt für die umgekehrte Rotation zu erhalten: (hover to transform)
Wenn Sie jQuery verwenden, können Sie die offset des übergeordneten Elements abrufen, diese von der neuen rotierten offset subtrahieren und den Rand verwenden, um sie in den Container zurückzusetzen. Es funktioniert mit allen Rotationen. Hier ist die Geige .
JS:
%Vor%Aus den bisher gegebenen Antworten gehe ich hervor, dass es keinen einfacheren Ansatz gibt, als JavaScript zu verwenden, um das Bild "neu auszurichten". Lassen Sie mich deshalb den Ansatz, den ich verwendet habe, teilen:
%Vor% myrotate ist die id der <a> die ich als switch missbrauche, myimage ist (rate) die id der img zu rotieren.
Probieren Sie es hier aus.
Ich weiß nicht, ob es einen einfacheren Weg gibt, aber Sie können den Rand des Bildes nach einer solchen Drehung einstellen.
%Vor%Sie können js verwenden, um Bildbreite und -höhe zu erhalten, damit die Werte entsprechend der Bildgröße festgelegt werden. Ich habe einen manuellen Weg benutzt.
BEARBEITEN:
Sie können sich immer mit
anlegen %Vor%wie hier gefunden: CSS "transform: rotieren () "Beeinflussung des Gesamtdesigns mit" Position: absolut "(nicht richtig ausgerichtet)
Tags und Links css image layout alignment rotatetransform