DIVを円に配置し、外側に向かって回転させる

Question

基本的にはDIV要素を円の形にレイアウトすることができましたが、回転の度合いを計算する方法は決まっていません。円の中心。

$(document).ready(function(){ 
       var elems = document.getElementsByClassName('test_box'); 

       var increase = Math.PI * 2/elems.length; 
       var x = 0, y = 0, angle = 0; 

       for (var i = 0; i < elems.length; i++) { 
        var elem = elems[i]; 
        // modify to change the radius and position of a circle 
        x = 400 * Math.cos(angle) + 700; 
        y = 400 * Math.sin(angle) + 700; 
        elem.style.position = 'absolute'; 
        elem.style.left = x + 'px'; 
        elem.style.top = y + 'px'; 
        //need to work this part out 
        var rot = 45; 
        elem.style['-moz-transform'] = "rotate("+rot+"deg)"; 
        elem.style.MozTransform = "rotate("+rot+"deg)"; 
        elem.style['-webkit-transform'] = "rotate("+rot+"deg)"; 
        elem.style['-o-transform'] = "rotate("+rot+"deg)"; 
        elem.style['-ms-transform'] = "rotate("+rot+"deg)"; 
        angle += increase; 
        console.log(angle); 
       } 
      }); 

私はこれをどのように行うことができるかについて誰でも知っていますか？

乾杯-C

Answer 1

rotはangleに依存しますが、angleはラジアンで表されます。

DRYので、いずれかの腐敗する角度へ変換：

// The -90 (degrees) makes the text face outwards. 
var rot = angle * 180/Math.PI - 90; 

それともスタイルを設定するときの角度を使用する（ただし、単位としてラジアンを使用）、およびドロップrotの宣言：

// The -0.5*Math.PI (radians) makes the text face outwards. 
elem.style.MozTransform = "rotate("+(angle-0.5*Math.PI)+"rad)"; 

Answer 2

これを試してみてください：

var rot = 90 + (i * (360/elems.length)); 

デモhttp://jsfiddle.net/gWZdd/

で、私はdiv要素のベースラインを確保するためにそこに開始時に90度を追加しまし中心に向かって直面していますしかし、あなたのニーズに合わせてこれを調整することができます。