I am struggling with rotating an image by clicking on a button as the image overlaps the buttons. Can anyone provide guidance on how to achieve this without overlapping?
For reference, here is my code and an example: here (http://jsfiddle.net/jj03b17n/5/).
Current situation:
https://i.sstatic.net/lIiWB.png
Desired outcome:
https://i.sstatic.net/LuEkl.png
JavaScript code for rotation:
$(optionsPreview.rotateRightBt).unbind("click").click(function () {
var deg = $(optionsPreview.img).data('rotate') || 0;
if (deg == 0) deg = 90;
else deg = deg + 90 == 360 ? 0 : deg + 90
$(optionsPreview.img).data('rotate', deg);
var rotate = 'rotate(' + deg + 'deg)';
$(optionsPreview.img).css({
'-webkit-transform': rotate,
'-moz-transform': rotate,
'-o-transform': rotate,
'-ms-transform': rotate,
'transform': rotate
});
return false;
});