Question

For fun Im making a analog clock 😀 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 200×200 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)" );