How to Rotate Image using calc on hover CSS/Jquery

Like in this website (Images listed under our Latest Publications) , how can i implement the rotate on hovering over the image function.

http://academiawp.demo.themexpert.com/home/?home=true

I tried using calc and skew, bbut still not ale to achieve the effect on hover over the image.

Solution

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus.com®">
							<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <title>stupid example</title>
 </head>
 <body>

<div>
 <img src="http://academiawp.demo.themexpert.com/wp-content/uploads/2016/01/book-9.jpeg" width="200px"> <img src="http://academiawp.demo.themexpert.com/wp-content/uploads/2016/01/book-8.jpg" width="200px"> <img src="http://academiawp.demo.themexpert.com/wp-content/uploads/2016/01/book-7.jpg" width="200px"> <img src="http://academiawp.demo.themexpert.com/wp-content/uploads/2016/01/book-6.jpg" width="200px">
 </div>
   <script type="text/javascript">
  <!--
	/*
		w3schools.com 's hand css code:
		-ms-transform: rotate(0deg); // IE 9 
		-webkit-transform: rotate(0deg); // Safari 3-8
		transform: rotate(0deg);
	*/

$("img").mouseenter(function(){
    $(this).css({'-ms-transform': 'rotate(10deg)','-webkit-transform':'rotate(10deg)','transform':'rotate(10deg)'});
}).mouseleave(function(){
    $(this).css({'-ms-transform': 'rotate(0deg)','-webkit-transform':'rotate(0deg)','transform':'rotate(0deg)'});
}); 
  //-->
  </script>
 </body>
</html>

in that case you should use $("div#some id").mouseenter(bla bla some combination