通过输入范围改变 rotateY 角度

Question

我在使用 Codepen 时遇到了问题。 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 值。这样每次拖动它时，它都会改变 rotateY 的角度并给出一个新的图案。

不好意思我的问题太长了，请指点笔！

等待答复！ :)

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)');
   });
});

编辑：这是一个代码笔（我也稍微更改了代码）：

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

通过输入范围改变 rotateY 角度

Change rotateY angle by input range

css

jquery

range