-webkit-transform traducir alrededor del centro

Question

Para la diversión Estoy haciendo un reloj analógico: D, pero ¿cómo conseguir que gire alrededor del centro? Quiero rotar la cosa mostrando minutos. ya está colocado apuntando a 15 como en 15.15, 16.15.

haciendo una llanura rotate("10deg") wil rotarlo alrededor de sí mismo. Supongo que tengo que hacer algo como esto:

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

el pin se coloca en el centro de una caja de 200x200. y el anterior no funciona :(

Answer 1

Uso -webkit-transform-origin para establecer qué punto las transformaciones ocurren con respecto a:

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

Es necesario utilizar el transform-origin property

Información y ejemplos:. https://developer.mozilla.org/En/CSS/-moz-transform-origin