Need advice as to why an image w/jquery script is not rotating

JavaScript
1

Hello all.
am working on some jquery/javascript animation. got most things ok and needed something to rotate an image.
Found this info:
https://code.google.com/p/jqueryrotate/wiki/Examples
Used this bit of code:

and applied it here:

<!doctype html>
<?php  ?>
<html lang="en">

<head id="head">
	<meta charset="utf-8">
	<link rel="stylesheet" href="css/animation.css">
	<script src="js/modernizr.js"></script>
	<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script>window.jQuery || document.write('<script src="js/jquery-1.11.1.min.js"><\/script>')</script> 
	<style>
	.sisVert02{
	position:relative;
	background:#0071c5;
	float:left;
	width:350px;
	border:1px dashed #005A9E;
	height:700px;
	min-height:100%;
	margin-left:5%;
	color:#fff;
	overflow:hidden;
	}


	#square1{
	position:absolute;
	left:240px;
	top:280px;
	z-index:1;
	}
	#square2{
	position:absolute;
	left:250px;
	top:200px;
	z-index:1;
	}	
	#square3{
	position:absolute;
	left:180px;
	top:120px;
	z-index:1;
	}
	
	
	</style>
		

	
		<title>simpleRotate</title>
	<meta name="simpleRotate" content="simpleRotate">

</head>

<body >



		
	<div id="ctr" class="ctr">
			
				<div class="sisVert02">
					<div id="vert02Js" class="vert02">
		
						<div><img id="square1" src="imgs/square1.png"></div>
						<div id="square2" ><img src="imgs/square2.png"></div>
						<div id="square3" ><img src="imgs/square3.png"></div>
					
					</div> <!-- end vert02Js -->
				<div class="clear"></div>
				</div>	<!-- end sisVerts -->

	
	</div> <!-- end ctr -->
	



<script>

var angle = 0;
setInterval(function(){
      angle+=3;
     $("#square1").rotate(angle);
},50);


</script>

</body>
</html>

that was the simplified version from my original js:

'use strict';

var $slog1 = $("#slog1Js");
var $slog2 = $("#slog2Js");
var $slog3 = $("#slog3Js");

var $gears = $("#gearsJs");
var $shield = $("#shieldJs");
var $bulb = $("#bulbJs");

var $sq1 = $("#square1");
var $sq2 = $("#square2");
var $sq3 = $("#square3");

/*var $a = 1;*/


$(document).ready(function(){
	$slog2.animate({"opacity":"1"},4000);
	$slog3.animate({"opacity":"1"},7000);

	$gears.animate({"top":"250px"},2000,"linear");
	$shield.animate({"top":"250px"},3000,"linear");
	$bulb.animate({"top":"250px"},4000,"linear");
	
	var angle = 0;
	setInterval(function(){
		  angle+=3;
		 $("#square1").rotate(angle);
	},50);

	

});

and it is still not working.
Would love some advice on how to get the little square (eventually to be a gear ) to rotate.
thank you
D

2

Never mind. It has been solved the rotate script from jfiddle had to be called in at the bottom of the page.