I want to find out how to make a spinning or rotating image when it is hovered. I would like to know how to emulate that functionality with CSS on the following code :
img { border-radius: 50%; }<img src="http://i.imgur.com/3DWAbmN.jpg" />
Add a comment |
5 Answers
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.sstatic.net/BLkKe.jpg" width="100" height="100"/>Here is a fiddle DEMO
More info and references :
- a guide about CSS transitions on MDN
- a guide about CSS transforms on MDN
- browser support table for 2d transforms on caniuse.com
- browser support table for transitions on caniuse.com
10 Comments
ccsakuweb
It works in firefox but not in Chrome. I use a similar code and suddenly it not works in Chrome... Do you know what has happened?
ccsakuweb
My version is Versión 40.0.2214.111 m, my problem is that the animation does not work, but in firefox it works.
web-tiki
@ccsakuweb I don't understand, I have the same version as you on windows 7 and it works fine in the snippet I posted : the image rotates 360 deg on hover.
web-tiki
@TimKrul what issue are you talking about?
|
It's very simple.
- You add an image.
You create a css property to this image.
img { transition: all 0.3s ease-in-out 0s; }You add an animation like that:
img:hover { cursor: default; transform: rotate(360deg); transition: all 0.3s ease-in-out 0s; }
1 Comment
T.Todua
maybe there should be
transition: NUMBER METHOD instead of METHOD NUMBERif you want to rotate inline elements, you should set the inline element to inline-block first.
i { display: inline-block; } i:hover { animation: rotate-btn .5s linear 3; -webkit-animation: rotate-btn .5s linear 3; } @keyframes rotate-btn { 0% { transform: rotate(0); } 100% { transform: rotate(-360deg); } } 
Comments
Here is my code, this flips on hover and flips back off-hover.
CSS:
.flip-container { background: transparent; display: inline-block; } .flip-this { position: relative; width: 100%; height: 100%; transition: transform 0.6s; transform-style: preserve-3d; } .flip-container:hover .flip-this { transition: 0.9s; transform: rotateY(180deg); } HTML:
<div class="flip-container"> <div class="flip-this"> <img width="100" alt="Godot icon" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/Godot_icon.svg/512px-Godot_icon.svg.png"> </div> </div> 
Comments
here is the automatic spin and rotating zoom effect using css3
#obj1{ float:right; width: 96px; height: 100px; -webkit-animation: mymove 20s infinite; /* Chrome, Safari, Opera */ animation: mymove 20s infinite; animation-delay:2s; background-image:url("obj1.png"); transform: scale(1.5); -moz-transform: scale(1.5); -webkit-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); /* IE 9 */ margin-bottom: 70px; } #obj2{ float:right; width: 96px; height: 100px; -webkit-animation: mymove 20s infinite; /* Chrome, Safari, Opera */ animation: mymove 20s infinite; animation-delay:2s; background-image:url("obj2.png"); transform: scale(1.5); -moz-transform: scale(1.5); -webkit-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); /* IE 9 */ margin-bottom: 70px; } #obj6{ float:right; width: 96px; height: 100px; -webkit-animation: mymove 20s infinite; /* Chrome, Safari, Opera */ animation: mymove 20s infinite; animation-delay:2s; background-image:url("obj6.png"); transform: scale(1.5); -moz-transform: scale(1.5); -webkit-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); /* IE 9 */ margin-bottom: 70px; } /* Standard syntax */ @keyframes mymove { 50% {transform: rotate(30deg); } <div style="width:100px; float:right; "> <div id="obj2"></div><br /><br /><br /> <div id="obj6"></div><br /><br /><br /> <div id="obj1"></div><br /><br /><br /> </div> 
