Georgian,
ставьте картинку в body, как обычно, желательно с таким изначальным положением(направление влево), мороки меньше.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
img{
width: 128px;
right: 150px;
bottom: 150px;
position: absolute;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
(function($) {
$.fn.rotateImg = function(options) {
var defaults = {deg : 0};
var settings = $.extend( {}, defaults, options );
return this.each(function() {
var img = $(this).css({position: 'absolute'});
var imgpos = img.position();
var x0, y0;
$(window).load(function() {
x0 = imgpos.left + img.width() / 2;
y0 = imgpos.top + img.height() / 2
});
var x, y, x1, y1, r;
$("html").mousemove(function(e) {
x1 = e.pageX;
y1 = e.pageY;
x = x1 - x0;
y = y1 - y0;
r = 180 + settings.deg - 180 / Math.PI * Math.atan2(y, x);
img.css("transform", "rotate(-" + r + "deg)");
img.css("-moz-transform", "rotate(-" + r + "deg)");
img.css("-webkit-transform", "rotate(-" + r + "deg)");
img.css("-o-transform", "rotate(-" + r + "deg)")
})
})
}
})(jQuery);
$(function(){
$('.rotate').rotateImg();//задать угол коррекции
});
</script>
</head>
<body>
<img class="rotate" src="http://vignette3.wikia.nocookie.net/assassinscreed/images/e/ec/AcII-common-sword.png/revision/latest?cb=20151018215313&path-prefix=ru" alt="" >
</body>
</html>
|