如何在悬停时使用 calc 旋转图像 CSS/Jquery

Question

如本网站（我们的最新出版物下列出的图片），我如何实现将鼠标悬停在图片上时旋转的功能。

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

我尝试使用 calc 和 skew，但仍然无法实现将鼠标悬停在图像上的效果。

Answer 1

<div class="site-content">
  <div class="project">
    <div class="project__card">
      <a href="" class="project__image"><img src="http://unsplash.it/600/400?image=189" width=600 height=400 alt=""></a>
      <div class="project__detail">
        <h2 class="project__title"><a href="#">Project Name</a></h2>
        <small class="project__category"><a href="#">Photography</a></small>
      </div>
    </div>
  </div>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
  window.jQuery || document.write('<script src="js/vendor/jquery-1.12.1.min.js"><\/script>')
</script>
<!-- Place this tag right after the last button or just before your close body tag. -->
<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
<script>
  window.twttr = (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0],
      t = window.twttr || {};
    if (d.getElementById(id)) return t;
    js = d.createElement(s);
    js.id = id;
    js.src = "https://platform.twitter.com/widgets.js";
    fjs.parentNode.insertBefore(js, fjs);

    t._e = [];
    t.ready = function(f) {
      t._e.push(f);
    };

    return t;
  }(document, "script", "twitter-wjs"));
</script>
<script src="dist/js/jquery.hover3d.js"></script>

<script>
  $(document).ready(function() {
    $(".project").hover3d({
      selector: ".project__card"
    });

    $(".movie").hover3d({
      selector: ".movie__card",
      shine: true,
      sensitivity: 20,
    });
  });
</script>

检查输出：Link

Answer 2

<!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>

在那种情况下你应该使用 $("div#some id").mouseenter(bla bla 一些组合

如何在悬停时使用 calc 旋转图像 CSS/Jquery

How to Rotate Image using calc on hover CSS/Jquery

html

css

jquery

mousehover