Question

为了好玩我制作一个模拟时钟：D但是如何让它绕中心旋转？我想旋转显示分钟的东西。它已经像15.15,16.15一样指向了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 property。

信息和示例：https://developer.mozilla.org/En/CSS/-moz-transform-origin

-webkit-transform在中心周围翻译

2 个答案: