webkit transforme: comment faire une rotation sur l'axe Z, mais pas autour du centre?

Question

Une idée de comment faire tourner la rotation de webkit pour tourner autour d'un point différent du centre de l'élément (par exemple autour du coin supérieur droit)?

Answer 1

Vous pouvez utiliser transformer origine pour changer la position de l'origine:

.myClass{ 

    -webkit-animation-duration: 1s; 

    -webkit-animation-name: myAnim; 

    -webkit-animation-iteration-count: infinite; 

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

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

Il vous suffit d'utiliser une rotation pour le voir en action maintenant :)

Voici la documentation officielle sur il: http://www.w3.org/TR/css3-3d-transforms/#transform-origin-property

Answer 2

Pouvez-vous traduire l'objet en premier, puis le faire pivoter? Si le centre de l'objet est à l'origine et que le coin supérieur droit est à 3,5, traduisez l'objet -3, -5 de sorte que le coin supérieur droit soit maintenant à l'origine. Faites ensuite pivoter l'objet normalement.