Javascript 变换旋转不'；不要从圆心开始

在css中，我们可以设置旋转原点以指示旋转起点的中心，但下面的示例似乎不是从圆的中心旋转

HTML:

JS

/**
*对每个孩子应用一个类
*IE8所需-
*/
jQuery.fn.rotate=函数（度）{
$（this.css（{'-webkit transform'：'rotate（'+degrees+'deg'），
“-moz变换”：“旋转（“+度+”度）”，
“-ms变换”：“旋转（“+度+”度）”，
“变换”：“旋转（“+度+”度）}）；
};
$（文档）.ready（函数（）{
$（'.circle container'）.children（）.each（function（））{
$（this.children（）.addClass（'item'+（$（this.index（）+1））；
});
var角=90；
对于（var i=1；i，您的旋转原点没有问题。相反，您的每个
都被赋予了一个相等的宽度和高度-创建了一个正方形。因此，您的图像溢出了


一个简单的解决方法是重新编写mixin，为要使用的图像的宽度和高度获取一个附加参数。然后，您可以将图像居中放置在
中，这样它就可以通过
位置：绝对
将图像与
顶部
对齐，而不考虑图像高度从新的
$image height
mixin参数派生的属性：


您的新CSS规则如下所示：

img {
    position: absolute;
    top: (-$item-height / 2) + ($item-width / 2);
}

这是

注意：在CSS中，还有其他方法可以将图像居中放置在一个较小的容器中，但如果您事先知道图像的高度，并且它们都是相同的尺寸，则此方法将非常简单。
@Saurabh Jhunhunwala在我的帖子中有一个代码笔链接。转换是偏离中心的，因为框模型的内容部分不匹配切记圆圈的视觉表示。（如下所示：
[··（$$）]
 — 
（$$）
就是你所看到的圆圈，而
[]
部分就是圆圈的实际部分。可见的圆圈有点太低了。）不过，我不知道这是为什么。
@import "compass/css3";

body { 
    cursor:url('http://ionicframework.com/img/finger.png'), auto;
}

@keyframes move-right {
    from {
        transform: rotate(0deg)
                   translate(-50px)
                   rotate(0deg);
    }
    to {
        transform: rotate(360deg)
                   translate(-50px) 
                   rotate(-360deg);
    }
}

/**
* Mixin to put items on a circle
* [1] - Allows children to be absolutely positioned
* [2] - Allows the mixin to be used on a list
* [3] - In case box-sizing: border-box has been enabled
* [4] - Allows any type of direct children to be targeted
*/

@mixin putOnCircle(
      $nb-items, //Number of items
      $circle-size, //Parent size
      $item-size, //Item size
      $class-for-IE: false //Base class name, false means use of pseudo-selectors
   ) {
    $half-item:     $item-size / 2;
    $half-parent: $circle-size / 2;

    position: relative;               /* [1] */
    width:  $circle-size;
    height: $circle-size;
    padding: 0;
    border-radius: 50%; 
    list-style: none;                 /* [2] */ 
    @include box-sizing(content-box); /* [3] */ 

    > * {                             /* [4] */
        display: block;
        position: absolute;
        top:  50%; 
        left: 50%;
        width:  $item-size;
        height: $item-size;
        margin: -$half-item;

        $angle: 360 / $nb-items;
        $rot: 0;
        @for $i from 1 to $nb-items+1 {
          // If no support for IE8-

          @if $class-for-IE == false {
            &:nth-of-type(#{$i}) {
              @include transform(rotate(#{$rot}deg) translate($half-parent) rotate(-#{$rot}deg));
            }
          }

          // If support for IE8-  

          @else {
            &.#{$class-for-IE}#{$i} {
              // If CSS transforms are not supported
              $mt: sin($rot * pi() / 180) * $half-parent - $half-item;
              $ml: cos($rot * pi() / 180) * $half-parent - $half-item;
              margin: $mt 0 0 $ml;
            }
          }
          $rot: $rot + $angle;
        }
    }
}

.circle-container {
    @include putOnCircle(24, 2*547px, 152px, false); 
    margin: 250px auto;
    border: solid 5px tomato;
    background-color: black;

    /*.item1 {
        transform: rotate(90deg);
    }
    .item2 {
        transform: rotate(90+15deg);
    }*/
    /* a {
        display: block;
        border-radius: 50%;
        box-shadow: 0 0 0 5px tomato;
    }*/
    /*  #test {
      transform: rotate(-45deg);
    }*/


    img {
        user-drag: none; 
        -moz-user-select: none;
        -webkit-user-drag: none;
        display: block; 
        width: 100%; 
        /* border-radius: 50%; */
        /* @include  filter(grayscale(100%)); */

        /*transform-origin: center;
        transform: rotate(15deg);*/

        /*&:hover {
          @include filter(grayscale(0));
        }*/
    }
}

/**
 * Apply a class to each child
 * Required for IE8-
 */
jQuery.fn.rotate = function(degrees) {
    $(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)',
                 '-moz-transform' : 'rotate('+ degrees +'deg)',
                 '-ms-transform' : 'rotate('+ degrees +'deg)',
                 'transform' : 'rotate('+ degrees +'deg)'});
};

$( document ).ready(function() {
  $('.circle-container').children().each(function() {
  $(this).children().addClass('item'+($(this).index() + 1));
});

var angle = 90;
for(var i=1; i<=24; i++){
  $('.item'+i).rotate(angle + 15*(i-1));
}
})

var myElement = document.getElementById('test');
var mc = new Hammer(myElement);

var now =0;
mc.on("panleft panright", function(ev) {
  if (ev.type =="panleft") {
    now = now+15;
    $('.circle-container').rotate(now);
  }
  if (ev.type =="panright") {
    now = now-15;
    $('.circle-container').rotate(now);
  }
});

img {
    position: absolute;
    top: (-$item-height / 2) + ($item-width / 2);
}