<! DOCTYPE html>
<meta charset= "UTF-8" >
<meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1"/>
<meta name= "viewport" content= "width=device-width,initial-scale=1.0"/>
<title> Click on the image to rotate 90 degrees </title>
<script src= "Js/jquery-1.11.3.js" type= "Text/javascript" ></script>
<style>
. rotate90{
Transform:rotate (90DEG);
}
. rotate180{
Transform:rotate (180DEG);
}
. rotate270{
Transform:rotate (270DEG);
}
. rotate360{
Transform:rotate (360DEG);
}
</style>
<script>
$ (function () {
var i = 0;
var classes = [' Rotate90 ', ' rotate180 ', ' rotate270 ', ' rotate360 '];
$ (' img '). On (' click ', function () {
var $this = $ (this);
$this. addclass (classes[i++% 4])
. removeclass (function (idx, CLS) {
var classes = Cls.split (");
return classes.length > 1? Classes[0]: ";
});
});
})
</script>
<body>
</body>
Click on a picture image to rotate 90 degrees