CSS 3 Rotate Animation on hover [duplicate] - html

Question

This question already has answers here:
Spin or rotate an image on hover
(5 answers)
Closed 7 years ago.
I have this code to make a rotation on hover. It doesn't work at all. What's is wrong with it?
I need the complete animation of the rotation for 360º
.icon-style-1 .builder-element-icon {
height: 100px;
width: 100px;
line-height: 100px;
background: blue;
line-height: 100px;
text-align: center;
margin: 0 auto;
display: block;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: white;
}
.icon-style-1 .builder-element-icon:hover {
background: green;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
<div class="icon-style-1">
<span class="builder-element-icon fa fa-camera"></span>
</div>

Answer 1

So here you go with transition on normal element style and rotate added on hover and External DEMO HERE
.icon-style-1 .builder-element-icon{
height: 100px;
width: 100px;
line-height: 100px;
background: blue;
line-height: 100px;
text-align: center;
margin: 0 auto;
display: block;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: white;
/* Firefox */
-moz-transition: all 1s ease;
/* WebKit */
-webkit-transition: all 1s ease;
/* Opera */
-o-transition: all 1s ease;
/* Standard */
transition: all 1s ease;
}
.icon-style-1 .builder-element-icon:hover{
background: green;
/* Firefox */
-moz-transform: rotate(360deg) ;
/* WebKit */
-webkit-transform: rotate(360deg);
/* Opera */
-o-transform: rotate(360deg) ;
/* Standard */
transform: rotate(360deg) ;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="icon-style-1">
<div class="builder-element-icon glyphicon glyphicon-camera">
</div>
</div>

Answer 2

360 degrees rotates it back to its original place. you probably wanted it to be 180deg;
if you want it animatad, you need to add a transition:
.icon-style-1 .builder-element-icon{
height: 100px;
width: 100px;
line-height: 100px;
background: blue;
line-height: 100px;
text-align: center;
margin: 0 auto;
display: block;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
color: white;
-moz-transition: -moz-transform ease 0.6s;
-webkit-transition: -webkit-transform ease 0.6s;
-o-transition: -o-transform ease 0.6s;
-ms-transition: -ms-transform ease 0.6s;
transition: transform ease 0.6s;
}
.icon-style-1 .builder-element-icon:hover{
background: green;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
<div class="icon-style-1">
<span class="builder-element-icon fa fa-camera">a</span>
</div>
and in case you want to animate the background color to, you could replace transition: transform ease 0.6s; withe either
transition: transform ease 0.6s, background ease 0.6s;
or
transition: all ease 0.6s;

Answer 3

You can use CSS3 transitions in order to achieve this result.
Just move your mouse over the label.
#rotatable {
font-size: 30px;
}
#rotatable:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
<span id="rotatable">I can rotate!</span>

Answer 4

You forgot to add CSS Transitions. Also, you don't need to use -moz, -ms and -o vendor prefixes now, see Can I Use:
JSFiddle
.icon-style-1 .builder-element-icon {
height: 100px;
width: 100px;
line-height: 100px;
background: blue;
text-align: center;
margin: 0 auto;
display: block;
border-radius: 50%;
color: white;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.icon-style-1 .builder-element-icon:hover {
background: green;
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="icon-style-1">
<span class="builder-element-icon fa fa-camera"></span>
</div>