Изменение угла поворота под углом ввода

Question

У меня возникла проблема во время возиться с Кодепеном. Here is my pen, над которым я работаю.

Вот наценка (в Haml):

.planet 
-(1...100).each do |i| 
    .circle 

%input{:type => "range" ,:min => "0.1" ,:max => "360" , :step =>'1',:value => '1' ,:id => 'focal'}/ 

SCSS:

$n:100; 
//play with this :D 
$angle:22deg; 
////////////////// 
body{ 
background: #111; 
} 
.planet{ 
position: absolute; 
margin: auto; 
height: 300px; 
width: 300px; 
top: 0; 
left: 0; 
right: 0; 
bottom: 0; 
.circle{ 
    height: 250px; 
    width: 250px; 
    border:3px solid ; 
    position: absolute; 
    border-radius: 100%; 
    @for $i from 1 through 100{ 
    &:nth-child(#{$i}){ 
     @include rotateY($angle * $i); 
     @include animation(sphere 0.8s linear infinite); 
     border-color:hsl($i * 360/$n, 100%, 50%); 
     } 
     } 
    } 
} 

Теперь, что я хочу сделать, это изменить значение $angle в соответствии со значением входного , Так что каждый раз, когда он тянется, он меняет угол поворота и дает новый узор.

Извините, если мой вопрос был слишком длинным и, пожалуйста, обратитесь к ручке!

Ждет ответа! :)

Answer 1

Я не знаю ни одного Haml, но вы должны добавить атрибут данных с исходными градусами (data-starting_degrees="") для каждого круга, а затем изменить JavaScript для этого:

$("#focal").on("input", function() { 
    $(".circle").each(function(){ 

     var degrees = parseInt($("#focal").val()) + parseInt($(this).data("start-degrees")); 
     console.log(degrees); 
     $(this).css('transform', 'rotateY(' + degrees + 'deg)'); 
    }); 
}); 

Edit: Вот codepen (Я также изменил код чуть позже):

http://codepen.io/anon/pen/aOdRqx