Rotate Circle with css hover [duplicate] - html

Question

This question already has answers here:
Spin or rotate an image on hover
(5 answers)
Closed 7 years ago.
I created an simple website:
So there is an circle above an image, i tried to rotate it on hover, but it simply wont worked! Heres my code!
<div class="image" id="landkreis">
<img src="reg.png" alt="" width="100%" height="auto" />
<span id="motha2">
<h6><br>Here<br>i am</h6>
</span>
</div>
h6 {text-align:center;
color:#f2f2f2;
font-size: 75px;
line-height: 74px;
font-weight:700;
margin: 0 5px 24px;
font-family: 'Route';}
#motha2 {
position: absolute;
top: 1px;
left: 15%;
width: 300px;
height:300px;
border-radius: 150px;
background-color:#4ec461 ; }
h6:hover {transform:rotate(-90deg);}
UPDATEUPDATE!!!!!!!!!!!!!!!!!!!!!!!!!!
Ok the transition works but how can i make the hole transition smooth and that for examle it first rotates -15deg an then to 15deg and stops finally at 0deg?

Answer 1

If you need "rotates -15deg an then to 15deg and stops finally at 0deg"
You have to change
h6:hover {transform:rotate(-90deg);}
to
h6:hover {
-moz-animation-name: rotate 1s linear 1;
-webkit-animation-name: rotate 1s linear 1;
animation-name: rotate 1s linear 1;
}
#-moz-keyframes rotate {
0%, 100% {-moz-transform: rotate(0deg);}
33% {-moz-transform: rotate(15deg);}
66% {-moz-transform: rotate(-15deg);}
}
#-webkit-keyframes rotate {
0%, 100% {-webkit-transform: rotate(0deg);}
33% {-webkit-transform: rotate(15deg);}
66% {-webkit-transform: rotate(-15deg);}
}
#keyframes rotate {
0%, 100% {transform: rotate(0deg);}
33% {transform: rotate(15deg);}
66% {transform: rotate(-15deg);}
}

Answer 2

Have you tried using the prefixes?
The browser implementation is sometimes slightly different for new CSS properties. That's why there are a couple of prefixes used by the different browser engines.
h6:hover {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform : rotate(-90deg);
}
See caniuse.com for more information.

Answer 3

DEMO
CSS:
div{
border-radius:50%;
width:200px;
height:100px;
background-color:green;
text-align:center;
}
.rotate{
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow:hidden;
}
.rotate:hover
{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}

Answer 4

#motha2:hover {
position: absolute;
top: 1px;
left: 15%;
width: 300px;
height:300px;
border-radius: 150px;
background-color:#4ec461 ;
-webkit-transform: rotate(7deg);
-moz-transform: rotate(7deg);
-ms-transform: rotate(7deg);
-o-transform: rotate(7deg);
transform : rotate(7deg);
}
Try this http://jsfiddle.net/VbZCX/

Answer 5

Here is the working DEMO http://jsfiddle.net/4wLpE/1/
But in this example its not ratating continuously. if you want so, let me know.
remove h6:hover
add
#motha2:hover {
cursor:pointer;
transform:rotate(-90deg);
-ms-transform:rotate(-90deg); /* IE 9 */
-webkit-transform:rotate(-90deg); /* Safari and Chrome */
}

Answer 6

Your example was working fine for me in firefox however it could be a browser issue. What browser you are on is very dependaent on what css3 code you can use. Also using browser prefix's might also help.
Take a look at my example here http://jsfiddle.net/yJH4W/1/ it seems to work on most modern browsers. If it doesnt work for you it could be because you are on a older browser that does not support it . To see what you can use a good site is caniuse.com
h6:hover {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform : rotate(-90deg);
}

Answer 7

h6 {text-align:center;
color:#f2f2f2;
font-size: 75px;
line-height: 74px;
font-weight:700;
margin: 0 5px 24px;
font-family: 'Route';
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow:hidden;
- See more at: http://blog.vivekv.com/rotate-image-360deg-when-mouse-hover-using-css-3.html#sthash.r0C3747t.dpuf
}
#motha2 {
position: absolute;
top: 1px;
left: 15%;
width: 300px;
height:300px;
border-radius: 150px;
background-color:#4ec461 ; }
h6:hover { -webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
- See more at: http://blog.vivekv.com/rotate-image-360deg-when-mouse-hover-using-css-3.html#sthash.r0C3747t.dpuf}

Answer 8

Here you have it working for Chrome: Chrome test
h6 {text-align:center;
color:#f2f2f2;
font-size: 75px;
line-height: 74px;
font-weight:700;
margin: 0 5px 24px;
font-family: 'Route';
display: block;
}
#motha2 {
position: absolute;
top: 1px;
left: 15%;
width: 300px;
height:300px;
border-radius: 150px;
background-color:#4ec461 ; }
#motha2:hover {-webkit-transform:rotate(-90deg);}
For other browsers: http://davidwalsh.name/css-transform-rotate
Smoother.... Test in Chrome
#motha2:hover {
-webkit-animation-name: rotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes rotate {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(90deg);}
}

Answer 9

I did tried it on button and should work on Images too..This is what you just need.
note: this code just uses CSS and HTML to make what you want.
input#round{
width:100px; /*same as the height*/
height:100px; /*same as the width*/
background-color:#05B7FF;
border:1px solid #05B7FF; /*same colour as the background*/
color:#fff;
font-size:1.6em;
/*initial spin*/
-moz-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
/*set the border-radius at half the size of the width and height*/
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
/*give the button a small drop shadow*/
-webkit-box-shadow: 0 0 10px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 10px rgba(0,0,0, .75);
box-shadow: 2px 2px 15px rgba(0,0,0, .75);
-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;
-o-transition-property:width,height,-o-transform,background,font-size,opacity,color;
-o-transition-duration:1s,1s,1s,1s,1s,1s,1s;
-moz-transition-property:width, height, -moz-transform, background, font-size, opacity, color;
-moz-transition-duration:1s,1s,1s,1s,1s,1s,1s;
transition-property:width,height,transform,background,font-size,opacity;
transition-duration:1s,1s,1s,1s,1s,1s;
display:inline-block;
}
/***NOW STYLE THE BUTTON'S HOVER STATE***/
input#round:hover{
background:#007DC5;
border:1px solid #007DC5;
/*reduce the size of the shadow to give a pushed effect*/
-webkit-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
-moz-box-shadow: 0px 0px 5px rgba(0,0,0, .75);
box-shadow: 0px 0px 5px rgba(0,0,0, .75);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
It has several other beautiful features like pushed effect.Worth trying.Gracious.
note: You can edit transition duration and then another animation.Its you call.