設置css旋轉指向一個點的元素

Question

我想旋轉一個div使用css 3變換旋轉函數的一個點。

我得到了這一點：jsfiddle link

$(document).ready(function(){ 
    var scw,sch,scx,scy; 
    calcCenter(); 
    $(window).resize(function() {   
     calcCenter(); 
    }); 
    function calcCenter(){ 
     sch = $(window).height(); 
     scw = $(window).width(); 
     scx = scw/2; 
     scy = sch/2; 
     $(".circle").remove(); 
     var circle = $("<span></span>").addClass('circle').text('.'); 
     circle.css('top',scy-50+"px"); 
     circle.css('left',scx-50+"px"); 
    $(document.body).append(circle); 
    } 
    function calcAngle(p1,p2){ 

     var angle = Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180/Math.PI; 
     return angle; 
    } 



    $(document).click(function(e){ 
     var box = $("<span></span>").addClass('box'); 
     var x = e.pageX,y=e.pageY; 
     box.css('top',y+"px"); 
     box.css('left',x+"px"); 

     $(document.body).append(box); 
     var angle = calcAngle({x:x,y:y},{x:scx,y:scy}); 

     box.css('-webkit-transform','rotate('+(90+angle)*-1+'deg)');   

     box.draggable({ 
       drag: function(e) { 
         var box = $(this); 
         var x = e.pageX,y=e.pageY; 
         box.css('top',y+"px"); 
         box.css('left',x+"px"); 
         var angle = calcAngle({x:x,y:y},{x:scx,y:scy}); 

         box.css('-webkit-transform','rotate('+(90+angle)*-1+'deg)'); 


         } 
         }); 
    }); 

    var sunAngle = 1; 
    setInterval(function(){ 
     var sun = $("span.circle")[0]; 
     $(sun).css('-webkit-transform','rotate('+sunAngle+'deg)'); 
     sunAngle = (sunAngle+1) %360;   
    },100); 
}); 

我用Google搜索 「LOOKAT」 功能，並發現了一些像只LOOKAT矩陣。

Answer 1

首先，你的圓心不能正確計算。你的圈子寬120px，但是你通過設置它的頂部和左邊來「居中」它，在scy - 50之前，你應該使用scy - 60（120px的一半是60px）。或者更好的是，還可以動態計算半個圓的寬度和高度，並將其減去，以防萬一您改變主意並再次改變大小。

我只是做了靜態：

circle.css('top',scy-60+"px"); 
circle.css('left',scx-60+"px"); 

其次，要計算.box元素需要圍繞其中心旋轉的角度，但你使用它的頂部和左側位置這樣做。這是不正確的。

再次，動態效果會更好，但讓我們做靜態的現在：

var angle = calcAngle({x:x + 32,y:y + 32},{x:scx,y:scy}); 

然後我不知道你與atan2() * 180/Math.PI做什麼，因爲atan2回報拉德，你想我度翻番檢查了兩者之間如何計算。結果並不像你想象的那麼簡單。 See this answer。

所以我增加了一個功能：

function radToDegree(rad) { 
    return (rad > 0 ? rad : (2*Math.PI + rad)) * 360/(2*Math.PI) 
} 

並返回角之前實現它：

function calcAngle(p1,p2){  
    var angle = Math.atan2(p2.y - p1.y, p2.x - p1.x); 
    return radToDegree(angle); 
} 

現在，度從頂部開始，這意味着如果角度爲0度，它將指向向上，而您需要它指向右側，因爲您的計算方式已設置。因此，您將+ 90添加到您的最終旋轉計算中。

如果你的觀點開始向上，那會很好，但事實並非如此。它從左下角開始，這是另一個135度。加上這些，你會得到225度的差異。所以：

box.css('-webkit-transform','rotate('+(angle+225)+'deg)'); 

瞧，你的腳本工作：http://jsfiddle.net/7ae3kxam/42/

編輯：也適用於現在