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>。

enter image description here

一个简单的解决方法是重新编写mixin，为你将要使用的图像的宽度和高度获取一个额外的参数。然后，您可以将图像置于<li>内，以便通过position:absolute使用从{{1}派生的top属性的图像来调整图像高度而不考虑图像高度mixin参数：

enter image description here

您的新CSS规则如下所示：

$image-height

这是your example with the updated mixin。

注意：还有其他方法可以将图像集中在CSS中较小的容器中 - 但如果您事先知道图像的高度并且它们都是相同的尺寸，那么这个方法会非常简单。

变换旋转不是从圆心开始

1 个答案: