-webkit-transform translate around center

Question

For fun Im making a analog clock :D but how to i get it to rotate around center? I want to rotate the thingy showing minutes. its already placed pointing at 15 like in 15.15, 16.15.

doing a plain rotate("10deg") wil rotate it around it self. guessing i have to do something like this:

$("#minPointer").css("-webkit-transform", "translate(-100px, -100px)");
$("#minPointer").css("-webkit-transform", "rotate("+val+"deg)" );
$("#minPointer").css("-webkit-transform", "translate(100px, 100px)" );

the pin is placed center in a 200x200 box. and the above does not work :(

Answer 1

Use -webkit-transform-origin to set what point transformations occur with respect to:

// Replace percentages to reflect what point you want to rotate around.
// Pixel values are fine.
$("#minPointer").css("-webkit-transform-origin", "50% 100%" );
$("#minPointer").css("-webkit-transform", "rotate("+val+"deg)" );

Answer 2

You need to use the transform-origin property.

Information and examples: https://developer.mozilla.org/En/CSS/-moz-transform-origin