-webkit-transform dịch xung quanh trung tâm

Question

Đối với vui vẻ Im thực hiện một đồng hồ analog: D nhưng làm thế nào để tôi làm cho nó xoay quanh trung tâm? Tôi muốn xoay các phút hiển thị thingy. vị trí của nó đã được đặt tại 15 như trong 15,15, 16,15.

làm đồng bằng rotate("10deg") sẽ tự xoay nó xung quanh nó. đoán tôi phải làm một cái gì đó như thế này:

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

pin được đặt chính giữa vào hộp 200x200. và ở trên không hoạt động :(

Answer 1

Sử dụng -webkit-transform-origin để thiết lập những gì biến đổi điểm xảy ra đối với:

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

Bạn cần phải sử dụng transform-origin property

Thông tin và ví dụ:. https://developer.mozilla.org/En/CSS/-moz-transform-origin