左のスライダでdivを回転する方法

Question

divをsliderとJQueryを使用して回転するにはどうすればよいですか？

左にスライドすると左に回転し、右にスライドすると右に回転します。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="inner" style="width:100px; height:100px; background-color:black;"></div> 
 
<input type="range" value="0" min="-360" max="360" />

Answer 1

またextendはrotate機能を生成することができます

var rotation = 0; 
 
jQuery.fn.rotate = function(degrees) { 
 
    $(this).css({'transform' : 'rotate('+ degrees +'deg)'}); 
 
    return $(this); 
 
}; 
 

 
$('.slider').on('input',function() { 
 
    rotation = parseInt($(this).val()); 
 
    $('.rotate').rotate(rotation); 
 
});

.rotate{ 
 
    background-color:black; 
 
    margin:20px 20px 20px 20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="rotate" style="width:100px; height:100px; background- 
 
color:black; display:block; "></div> 
 
<br/> 
 

 
<input type="range" class="slider" value="0" min="-360" max="360" />