0

Hi Programmers of the world. I am building an online business card editor. So users can add images e.g. logo and move it or resize it using jquery draggable() and resizable().

Card editor tool That is working perfectly. My client however insists that the tool should enable users rotate an image or element. using 'Rotatable()'. I understand there is nothing like rotatable in Jquery UI. But I have seen some online tools that rotate elements. I just dont know how to do it. Thanks in advance

jonah
  • 213
  • 4
  • 16
  • 1
    It's a pretty radical notion, but have you tried searching ["jQuery rotatable"](http://www.google.fr/search?q=jquery+rotatable) on Google?! – Nowhere man Jun 27 '15 at 13:25
  • possible duplicate of [Make div rotatable in every browser](http://stackoverflow.com/questions/16193536/make-div-rotatable-in-every-browser) – Nowhere man Jun 27 '15 at 13:27
  • Thanks Nowhere man, pretty much what I was looking for. I had searched google but not with your keywords. Yours gave me results. – jonah Jun 29 '15 at 09:10

1 Answers1

1

You can check out the below code for that

var img = $('.image');
if(img.length > 0){
    var offset = img.offset();
    function mouse(evt){
        var center_x = (offset.left) + (img.width()/2);
        var center_y = (offset.top) + (img.height()/2);
        var mouse_x = evt.pageX; var mouse_y = evt.pageY;
        var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
        var degree = (radians * (180 / Math.PI) * -1) + 90; 
        img.css('-moz-transform', 'rotate('+degree+'deg)');
        img.css('-webkit-transform', 'rotate('+degree+'deg)');
        img.css('-o-transform', 'rotate('+degree+'deg)');
        img.css('-ms-transform', 'rotate('+degree+'deg)');
    }
    $(document).mousemove(mouse);
}
#apDiv1 {
    position:absolute;
    width:400px;
    height:327px;
    z-index:1;
    left: 105px;
    top: 38px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="apDiv1"><img src="http://iconizer.net/files/DefaultIcon_ver_0.11/orig/arrow-up.png" class="image"/>
</div>
Pratik Shah
  • 788
  • 5
  • 8