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

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

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