rotate and scale

by ostapische

HTML

<script src="http://jqueryrotate.googlecode.com/files/jQueryRotateCompressed.js"></script>
<script src="https://rawgithub.com/louisremi/jquery.transform.js/master/jquery.transform2d.js"></script>
<img src="https://www.google.ru/images/icons/product/chrome-48.png" />

CSS

img {
    width: 48px;
    height: 48px;
    position: fixed;
    top: 30px;
    left: 30px;
}

JavaScript

$(document.body).ready(function(){
    $("img").mouseover(function(){
        var width = $(this).width();
        var height = $(this).height();
        var toResize = Math.random() * 20 - 10; // percent scale
        var newWidth = parseInt(width + toResize * width/height);
        var newHeight = parseInt(height + toResize * height/width);
        var newTop = parseInt(30 + (48 - newHeight) / 2);
        var newLeft = parseInt(30 + (48 - newWidth) / 2);
        var angle = Math.random() * 360;
        $(this).animate({
		    width: newWidth + 'px',
		    height: newHeight + 'px',
            left: newLeft + 'px',
            top: newTop + 'px',
            // https://github.com/louisremi/jquery.transform.js
            transform: "rotate(" + angle + "deg)" // this
	    }, 500, function(){
            // https://code.google.com/p/jqueryrotate/
            //$(this).rotate({animateTo: angle}); // or this
	    });
    });
});