Question

请检查MY BUGGY DEMO FIDDLE

$( ".circ-part" ).hover(
   function() {
     $(this).width(90);
   }, function() {
     $(this).width(60);
   }
 );

var   angle = 0, centerX = 120, centerY = 150,
      total = $(".circ-part").length,
      step = (2 * Math.PI) / total,
      radius = 100;

for (var i = 0; i < total; i++) {
    // positions around circle
    var xposition = centerX + Math.cos(angle) * radius,
        yposition = centerY + Math.sin(angle) * radius;
    
    // rotation to center point
    var dx = centerX - xposition,
        dy = centerY - yposition,
        rotation = Math.atan2(dy, dx) * 180 / Math.PI; //radians to degrees

    var element =  $( ".circ-part:eq(" + i + ")" );
    element.css({ 
      "transform": 
        "translate(" + xposition + "px," + yposition + "px)" + 
        "rotate(" + rotation +"deg)" 
    });

    // increase angle 
    angle += step;
  };

*{ margin:0; padding:0;}
.circ-part{
    background: red;
    position: absolute;
    width:60px;height: 30px;
    transform-origin: left center;
}

.first{
    background:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="wrap">
  <div class="circ-part first">x</div>
  <div class="circ-part">x</div>
  <div class="circ-part">x</div>
  <div class="circ-part">x</div>
  <div class="circ-part">x</div>
</div>

我将divs放在圆圈周围并均匀分布。在悬停时，我想更改div的宽度。

更新：我添加了css

transform-origin: left center;

现在它只能以其他方式运作 - 我需要元素向外扩展......

Answer 1

您正在增加宽度，但不会调整位置。试试这个：

$( ".circ-part" ).hover(
   function() {
     $(this).width(90);
     $(this).css({left: -15});
   }, function() {
     $(this).width(60);
     $(this).css({left: 0});
   }
 );

Answer 2

尝试使用transform-origin:。

Info here.

只需在你的小提琴的CSS中添加transform-origin: 0 0;到circ-part即可移除动作。然而，它看起来像垃圾。你必须根据自己的需要调整它。

旋转后改变'div'的宽度？

2 个答案: