改变旋转后'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>

我周围放置一圈divs均匀地分布其中。悬停时，我想更改宽度div。

更新： 我添加CSS

transform-origin: left center; 

现在它只能倒过来 - 我需要的元素向外扩张......

Answer 1

尝试transform-origin:玩。

Info here.

只是在你的提琴的CSS添加到transform-origin: 0 0;删除circ-part运动。但是，它看起来像废话。你必须调整它以满足你的需求。

Answer 2

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

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