旋轉div如何設置中心點？

Question

我的JavaScript：

$(function() { 
    var $elie = $(".circle"); 
    rotate(0); 
    function rotate(degree) {   
     $elie.css({ WebkitTransform: 'rotate(' + degree + 'deg)'}); 
     $elie.css({ '-moz-transform': 'rotate(' + degree + 'deg)'});      
     timer = setTimeout(function() { 
      rotate(++degree); 
     },5); 
    } 
}); 

以下是演示：http://fakeheal.eu/demo/

如何繞另一箇中心點DIV？

Answer 1

你會使用transform-origin爲：

$elie.css("-webkit-transform-origin", "50% 100%"); 

或

transform-origin: 100% 40%; 
-ms-transform-origin: 100% 40%; /* IE 9 */ 
-webkit-transform-origin: 100% 40%; /* Safari and Chrome */ 
-moz-transform-origin: 100% 40%; /* Firefox */ 
-o-transform-origin: 100% 40%; /* Opera */ 

FIDDLE

---

編輯：

要圍繞.circle元素的中心旋轉，首先需要高度，否則不存在中心。然後，你可以使用百分比，或要容易上手得多center財產，像這樣：

transform-origin:center center; 

DEMONSTRATION