javascript - 设置 CSS 对象的旋转点

Question

是否可以在旋转 HTML 元素时指定旋转点？

例如:如果 HTML div 具有 left、top、width、height 属性:0,0,100,100。旋转点(我们围绕 div 旋转的点)将为 50,50(中点)。但是我想把旋转点改成0,0。

我正在使用 CSS 的“变换”属性进行旋转:

#myDiv {
   transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   /*Can I specify the rotational point???*/
   transform: rotate(45deg) rotation-point:0px 0px; ??
}

有一种方法可以使用 CSS 的“旋转”属性来实现，但 W3School 表示主流浏览器不支持这种方法:

rotation: 45deg;
rotation-point:0px 0px;

Answer 1

是的，使用 transform-origin CSS3 属性。

http://www.w3.org/TR/css3-2d-transforms/#transform-origin-property