webkit transformiert: Wie man auf der Z-Achse dreht, aber nicht um die Mitte?

Question

Haben Sie eine Idee, wie Sie die Rotation des Webkits in Rotation um einen Punkt bringen, der sich von der Mitte des Elements unterscheidet (z. B. um die obere rechte Ecke)?

Answer 1

können Sie transformations Herkunft verwenden, um die Position des Ursprungs zu ändern:

.myClass{ 

    -webkit-animation-duration: 1s; 

    -webkit-animation-name: myAnim; 

    -webkit-animation-iteration-count: infinite; 

    -webkit-transform-origin: 275px 150px; 

    -webkit-animation-timing-function: linear; 
} 

Sie müssen nur eine Drehung verwenden Sie es in Aktion zu sehen jetzt :)

Hier ist die offizielle Dokumentation über es: http://www.w3.org/TR/css3-3d-transforms/#transform-origin-property

Answer 2

Können Sie das Objekt zuerst übersetzen und dann drehen?

Wenn die Mitte des Objekts im Ursprung ist und die obere rechte Ecke bei 3,5 liegt, dann übersetze das Objekt -3, -5 so, dass die obere rechte Ecke jetzt im Ursprung ist. Dann rotiere das Objekt wie gewohnt.