变换旋转不是从圆心开始

Question

在css中我们可以设置旋转原点来表示旋转开始的圆心，但是下面的例子好像不是从圆心开始旋转的

HTML:

<ul id='test' class='circle-container'>
    <li><img src='http://lorempixel.com/152/244/city/'></li>
    <li><img src='http://lorempixel.com/152/244/cats/'></li>
    <li><img src='http://lorempixel.com/152/244/food/'></li>
    <li><img src='http://lorempixel.com/152/244/animals/'></li>
    <li><img src='http://lorempixel.com/152/244/abstract/'></li>
    <li><img src='http://lorempixel.com/152/244/nature/'></li>
    <li><img src='http://lorempixel.com/152/244/city/'></li>
    <li><img src='http://lorempixel.com/152/244/cats/'></li>
    <li><img src='http://lorempixel.com/152/244/food/'></li>
    <li><img src='http://lorempixel.com/152/244/animals/'></li>
    <li><img src='http://lorempixel.com/152/244/abstract/'></li>
    <li><img src='http://lorempixel.com/152/244/nature/'></li>
    <li><img src='http://lorempixel.com/152/244/city/'></li>
    <li><img src='http://lorempixel.com/152/244/cats/'></li>
    <li><img src='http://lorempixel.com/152/244/food/'></li>
    <li><img src='http://lorempixel.com/152/244/animals/'></li>
    <li><img src='http://lorempixel.com/152/244/abstract/'></li>
    <li><img src='http://lorempixel.com/152/244/nature/'></li>
    <li><img src='http://lorempixel.com/152/244/city/'></li>
    <li><img src='http://lorempixel.com/152/244/cats/'></li>
    <li><img src='http://lorempixel.com/152/244/food/'></li>
    <li><img src='http://lorempixel.com/152/244/animals/'></li>
    <li><img src='http://lorempixel.com/152/244/abstract/'></li>
    <li><img src='http://lorempixel.com/152/244/nature/'></li>
</ul>

CSS:

@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));
        }*/
    }
}

JS

/**
 * 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);
  }
});

You can check a demo on codepen。如何解决这个问题？

Answer 1

您的旋转原点没有问题。相反，您的每个 <li> 都被赋予了相等的设定宽度和高度 - 创建一个正方形。因此，您的图像溢出 <li>.

一个简单的解决方法是重新编写您的 mixin，为您将要使用的图像的宽度 和高度 添加一个附加参数。然后你可以将你的图像放在 <li> 的中心，这样它就可以在不考虑图像高度的情况下旋转，方法是 position:absolute 使用从新的 [=16] 派生的 top 属性对图像进行处理=] 混入参数：

您的新 CSS 规则如下所示：

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

这里是your example with the updated mixin.

注意：在 CSS 中还有其他方法可以让图像在较小的容器中居中 - 但如果您提前知道图像的高度并且它们都是相同的尺寸。

变换旋转不是从圆心开始

Transform rotation doesn't start from the centre of a circle

javascript

css

jquery

compass-sass