Search code examples
jqueryimage-rotation

image rotation using input box?

How can I make text rotation using an input box to manipulate the rotation. I had text rotation using mouse but that got to be really complicated when I used draggable. Please help me

Solution

  • I hope this will guide you to accomplish it

    $(document).ready(function(){
    $("#rotateButton").click(function(){
       var x= $("#rotateInput").val();      
     $("#rotate").css('transform','rotate(' + x + 'deg)');
      
    });
});
    #rotate{
  background: url('https://cdn2.iconfinder.com/data/icons/faceavatars/PNG/D04.png');
   width: 180px;
   height:150px;
  background-repeat:no-repeat;
  margin:40px auto;
  
  }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

   <div id="rotate"></div>

<input id="rotateInput" type="text" value="0">
<button id="rotateButton">Rotate It</button>