webkit transforms: how to roate on Z axis, but not

Question

Any idea how to get the webkit transform rotation to rotate around a point different that the center of the element (e.g. around the top right corner)?

Answer 1

Can you translate the object first, then rotate it?

i.e. if the center of the object is at the origin and the top-right corner is at 3,5 then translate the object -3,-5 such that the top-right corner is now at the origin. Then rotate the object as normal.

Answer 2

You can use transform-origin to change the position of the origin :

.myClass{

    -webkit-animation-duration: 1s;

    -webkit-animation-name: myAnim;

    -webkit-animation-iteration-count: infinite;

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

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

You just have to use a rotation to see it in action now :)

Here is the official documentation about it : http://www.w3.org/TR/css3-3d-transforms/#transform-origin-property