Изменить ширину «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>

I место divs вокруг круга и распределить их равномерно. При наведении мыши я хочу изменить ширину div.

UPDATE: я добавил CSS

transform-origin: left center; 

Сейчас он работает только наоборот - мне нужно элементы, чтобы развернуть наружу ...

Answer 1

Попробуйте сыграть с transform-origin:.

Info here.

Просто добавив transform-origin: 0 0; в circ-part в CSS вашей скрипки удаляет движение. Однако это выглядит как дерьмо. Вам нужно будет настроить его на свои нужды.

Answer 2

Вы увеличиваете ширину, но не корректируете положение. Попробуйте следующее:

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