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

编辑：也适用于现在