-webkit-transform перевести вокруг центра

Question

Ради интереса я делаю аналоговые часы: D, но как мне заставить их вращаться вокруг центра?Я хочу повернуть вещь, показывая минуты.он уже направлен на 15, как в 15.15, 16.15.

, делая простое rotate("10deg"), и он сам будет вращать его.предполагая, что я должен сделать что-то вроде этого:

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

булавка помещена в центр в коробке 200x200.и выше не работает: (

Answer 1

Используйте -webkit-transform-origin, чтобы установить, какие преобразования точки происходят в отношении:

// 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

Вам необходимо использовать свойство transform-origin .

Информация и примеры: https://developer.mozilla.org/En/CSS/-moz-transform-origin