javascript - 旋转后更改 'div' 的宽度？

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>

我将 div 放在圆圈周围并均匀分布。悬停时我想更改 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});
   }
 );