1

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>

Improve this question
3
  • provide some html too Commented Sep 18, 2015 at 11:51
  • I just edited title and add some text to my question Commented Sep 18, 2015 at 11:57
  • BTW, you should change class=".icon-style-1" to class="icon-style-1" Commented Sep 18, 2015 at 11:59

4 Answers 4

Reset to default
2

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Not working in my code; this is the real html '<div id="builder-content-icon-1" class="builder-content-icon-wrapper icon-style-1 hvr-float"><div class="builder-content-icon-inner builder-content-icon-size-xl"><span class="builder-element-icon fa fa-camera"></span></div></div>' jsfiddle.net/r9vz9mht
@JPashs - here demo with your html
Only works in Safari. Not working in Chrome and Firefox v40
@JPashs.. I do not have safari here and I gave solution after testing in chrome itself.. :)
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;
Improve this answer

8 Comments

but I need the complete animation of the rotation for 360º
so you should add a transition property…
ok, I just edited title and add some text to my question.
added it in my answer
was a typo just a mistake
|
1

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>

Improve this answer

Comments

1

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>

Improve this answer

3 Comments

working , but it flip the element, I need rotation.
@JPashs try now please, I took your code and fixed it.
@JPashs I looked into other answers comments, JSFiddle with your real HTML.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.