timer - rotate - 1

<!doctype html>
<html lang="ko">
 <head>
  <meta charset="UTF-8">
  <title>rotate</title>
  <style>
            .imgs img {
                margin:10px;
                border-radius:50px;
                transform: rotate(30deg);
            }
        </style>
 </head>
 <body>
        <div class="imgs">
            <img id="img1" src="http://lorempixel.com/100/100/animals">
            <img id="img2" src="http://lorempixel.com/100/100/city">
            <img id="img3" src="http://lorempixel.com/100/100/food">
        </div>
    <script src="./js/jquery-1.11.1.min.js"></script>
    <script>
        $(".imgs img").css("transform","rotate(0deg)");
        var d = 0;
        var timer = null;
        function r(obj)
        {
            d = d + 10;
            if( d > 360 ) d = 0;
            var eff = "rotate(" + d + "deg)";
            $("#" + obj).css("transform",eff);
        }
        $(".imgs img").hover(
            function(){
                var obj = $(this).attr("id");
                timer = setInterval(
                    function(){
                        r( obj );
                    }, 10
                );
            },
            function(){
                clearInterval(timer);
                timer =  null;
            }
        );
    </script>
 </body>
</html>