CSS transform rotation do not work

Question

That is very simple, but don't work.

HTML:

 <div id="add_content">Rotate Before at hover</div>

CSS:

#add_content {
    margin: 30px;
}
#add_content:before {
    background-color: red;
    content: 'a';
    padding: 5px 10px;
    margin-right: 10px; 
    display: inline-block;
}
#add_content:before:hover  {
    transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
}

http://fiddle.jshell.net/nu6EA/5/

Don't work rotation

It seem to be the hover which isn't working, not the rotation (add `background-color: blue` to the `:before:hover` to see this. See http://stackoverflow.com/questions/8874326/how-to-make-a-hover-effect-for-pseudo-elements — adamdc78, Jan 30 '15 at 19:03

score 1 · Answer 1 · answered Jan 30 '15 at 19:07

1

Your :hover must be before :before.Try this CSS:

#add_content {
    margin: 30px;

}
#add_content:before {
    transition: all .2s ease-in;
    background-color: red;
    content: 'a';
    padding: 5px 10px;
    margin-right: 10px; 
    display: inline-block;
}
#add_content:hover:before  {
    transform: rotate(360deg);
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
}

Updated Fiddle: http://fiddle.jshell.net/nu6EA/6/

answered Jan 30 '15 at 19:07

atiquratik

1,296
3
27
34

1

1. `:hover` must be before `:before` 2. need add `transition: all .2s ease-in;` Thank you @aRahmanS29 ! – Photo Coder Jan 30 '15 at 19:15
1

@ДмитрийФролов, FYI: you'd need to accept one of the answer that helps you to resolve your issue. Also don't forget to up-vote answers that is helpful to you. Check this: http://stackoverflow.com/help/someone-answers – atiquratik Jan 30 '15 at 19:35
@aRahmanS29 your answer was definitely worth an upvote. sometimes people come ask and leave. No sense for the community... – NilsB Jul 19 '15 at 19:03

adamdc78 · Answer 2 · 2015-01-30T19:13:23.277

Change the :before pseudo-element in div:hover instead:

#add_content {
  margin: 30px;
}
#add_content:before {
  background-color: red;
  content: 'a';
  padding: 5px 10px;
  margin-right: 10px;
  display: inline-block;
}
#add_content:hover:before {
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
}

<div id="add_content">Rotate Before at hover</div>

score 0 · Answer 3 · answered Jan 30 '15 at 19:36

I guess you want to animate the rotation on hover... Try this code: http://fiddle.jshell.net/nu6EA/9/

#add_content {
    margin: 30px;
}
#add_content::before {
    background-color: red;
    content: 'a';
    padding: 5px 10px;
    margin-right: 10px; 
    display: inline-block;
}
#add_content:hover:before  {
    -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
    animation: mymove 1s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    100% {-webkit-transform: rotate(360deg);}
}

/* Standard syntax */
@keyframes mymove {
    100% {transform: rotate(360deg);}
}

updated the fiddle... Sorry for previous link which did not map to code that I put in the block — spooky, Jan 30 '15 at 19:39

CSS transform rotation do not work

3 Answers3