通过css3变换围绕中心点旋转多个div

时间:2013-05-10 16:16:17

标签: css3 rotation transform

我试图用css3围绕中心点旋转一些元素,但运气不好。 基本上我有一个函数将n个元素(div)放在一个圆周上,我想做的是用css3将每个元素移动到下一个位置。

注意:rotatorElements是一个包含所有元素的数组。

for (var i=0; i<rotatorElements['obj'].length; i++){

   $thisobj = $('.slice-'+rotatorElements['obj'][i]);

  startDegrees = rotatorElements['angle_s'][i];
  endDegrees = rotatorElements['angle_e'][i];


  newDiv = $thisobj.get(0);
  goX = (options.circle.x-newDiv.offsetLeft)+'px';
  goY = (options.circle.y-newDiv.offsetTop)+'px';
  $thisobj.css("transform-origin", goX+" "+goY);

  newDiv.style.webkitTransition = newDiv.style.MozTransition =
  newDiv.style.OTransition = newDiv.style.transition =
  'all 1s ease-in-out';

  newDiv.style.webkitTransform = newDiv.style.MozTransform =
  newDiv.style.OTransform = newDiv.style.transform =
  'rotate('+sliceDegrees+'deg)';
}

感谢您提供的任何帮助。

0 个答案:

没有答案