Spin or Rotate an Image on Hover

Spin or rotate an image on hover

You can use CSS3 transitions with rotate() to spin the image on hover.

Rotating image :

img {
  transition: transform .7s ease-in-out;
}
img:hover {
  transform: rotate(360deg);
}

<img src="https://i.stack.imgur.com/BLkKe.jpg" width="100" height="100"/>

How to make image rotate on hover css

Rtate image in css on hover

h1 {  color: #222;  text-align: center;  font-size: 40px;}
h2 {  color: #222;  text-align: center;}
img {  transition: 0.70s;  -webkit-transition: 0.70s;  -moz-transition: 0.70s;  -ms-transition: 0.70s;  -o-transition: 0.70s;  width: 250px;  height: 150px;  display: block;  margin-right: auto;  margin-left: auto;}
img:hover {  transition: 0.70s;  -webkit-transition: 0.70s;  -moz-transition: 0.70s;  -ms-transition: 0.70s;  -o-transition: 0.70s;  -webkit-transform: rotate(180deg);  -moz-transform: rotate(180deg);  -o-transform: rotate(180deg);  -ms-transform: rotate(180deg);  transform: rotate(180deg);}

<body bgcolor="#333">  <h1>-webkit-transform: rotate(180deg);</h1>  <h2>Hover to see the effect</h2>  <img src="http://www.hdwallpapers.in/walls/lion-wide.jpg">  <h2>To get it so it works in all web broswers:</h2>  <h2>Mozilla firefox: -moz-transform: rotate(180deg);    <br>  Opera: -o-transform: rotate(180deg);    <br> Internet Explorer: -ms-transform: rotate(180deg);    <br>    CSS3: transform: rotate(180deg);</h2>  <br><h2>The animation:</h2><h2>CSS3: transition: 0.70s;  <br>  Chrome/Safari: -webkit-transition: 0.70s;  <br>  Mozilla firefox: -moz-transition: 0.70s;  <br>  Internet Explorer: -ms-transition: 0.70s;  <br>  Opera: -o-transition: 0.70s;</h2>  <h2>More pens coming soon</h2>

How do I rotate an image on hover using jquery?

you can do it using jQuery like below

<!DOCTYPE html><html><head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </head>
<style type="text/css">
div.main{ width: 100px; height: 100px; }
div.main img{ width: 100%; height: 100%;}
.change{ -ms-transform: rotate(360deg); /* IE 9 */    -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */    transform: rotate(360deg);    transition-duration: 5s;}
   
</style>

<body>
<div class="main"><img src="https://image.freepik.com/free-icon/apple-logo_318-40184.jpg"></div>
<p id="dis"></p>
<script type="text/javascript">

$("div.main").mouseenter(function(){ $(this).addClass("change").delay(5000).queue(function(){  $(this).removeClass("change").dequeue(); }); });


</script>



</body>

</html>

SVG rotate image fill on hover

Instead of rotating the whole SVG and then trying to do the reverse rotation on the image, just rotate the hexagon. The polygon (and thus the clipPath) will be rotated, but the image will be unaffected.

svg #hex {
    -ms-transform: rotate(0deg); /* IE 9 */
    -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
    transform: rotate(0deg);

    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    transform: 50% 50%;
}

svg:hover #hex {
    -ms-transform: rotate(7deg); /* IE 9 */
    -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
    transform: rotate(7deg);
}

Demo fiddle here

Spin animation initiated on hover but still completes when off hover

This should work ! :)

jQuery(document).ready(function(){jQuery(".logo").hover(function(){   var logo = jQuery(this);  if(!logo.hasClass('hover')){     logo.addClass('hover');     setTimeout(function(){        logo.removeClass('hover');     }, 450);  }}, function(){});});

@keyframes spin {  0% { transform: rotate(0deg); }  25% { transform: rotate(-90deg); }  50%{ transform: rotate(-180deg); }  75% { transform: rotate(-270deg); }  100% { transform: rotate(-360deg); }}
.logo.hover > .spin{   animation: spin 450ms;}
.logo{  background: #eee;  width: 100px;  height: 100px;  text-align: center;  li

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/><a href="#">  <div class="logo">    <i class="fa fa-globe fa-2x spin" aria-hidden="true"></i>  </div></a>

How to make the button in such a way that hovering it results in the rotation and spinning of another object?

If I have understood the requirement correctly, you do not need Javascript for this.

However, CSS is not currently able to style a sibling element that is before a hovered element (it can't 'go back up' the DOM). But it can style a sibling element that follows the hovered element.

So the first change is to put the button element before the moon element. Now when the button element is hovered we can select its immediate sibling using the + combinator and from there we can select the rotate and moon elements to give them the animations required for rotating and spinning. (In this case we have left the definition of rotate as it is in the code in the question and introduced the spin animation to keep the star spinning around its center).

Now when the button is hovered the star rotates (moves in a large circle) and spins (rotates about its own center).

This snippet also makes the star spin when it is hovered and doesn't have any movement when there is no hovering. Obviously you can change the styling to have what you want there. Also the counterrotation is removed and the -webkit- prefixes, just to simplify things (and you don't want -webkit- with no vanilla setting set as well as some browsers may not interpret it).

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      position: relative;
      right: -500px;
      bottom: -150px;
    }
    
    .moon,
    .star {
      background-position: center;
      /* Center the image */
      background-repeat: no-repeat;
      /* Do not repeat the image */
      background-size: 120%;
      /* Resize the background image to cover the entire container */
      border-radius: 50%;
    }
    
    .moon {
      background-color: transparent;
      background-image: url("https://i.stack.imgur.com/0bcIk.png");
      position: absolute;
      width: 200px;
      height: 200px;
      margin: 50px;
    }
    
    .star {
      position: relative;
      background-color: transparent;
      background-image: url("https://i.stack.imgur.com/gjbgR.png");
      width: 100px;
      height: 100px;
      transform: rotate(0deg);
    }
    
    button:hover+.moon .star,
    .star:hover {
      animation: spin 5s infinite linear;
    }
    
    @keyframes spin {
      from {
        transform: rotateZ(0deg);
      }
      to {
        transform: rotateZ(360deg);
      }
    }
    
    button:hover+.moon .rotate {
      width: 100%;
      height: 100%;
      animation: circle 10s infinite linear;
    }
    
    @keyframes circle {
      from {
        transform: rotateZ(0deg);
      }
      to {
        transform: rotateZ(360deg);
      }
    }
    
    button {
      background-color: white;
      color: black;
      text-align: center;
      padding: 16px 32px;
      font-size: 16px;
      cursor: pointer;
      border: 2px solid green;
      display: inline-block;
      transition-duration: 0.3s;
      position: relative;
      left: -350px;
      border-radius: 50px;
      bottom: -100px;
    }
    
    button:hover {
      background-color: green;
      color: white;
      display: inline-block;
      border: 1px solid white;
      transition: 0.5s;
    }
  </style>
</head>

<body style="background-color: green">
  <button>Hover</button>
  <div class="moon">
    <div class="rotate">
      <div class="star"></div>
    </div>
  </div>

</body>

</html>

Spin or Rotate an Image on Hover