NZMAI NZMAI - 4 months ago 16
HTML Question

Icon flipping on hover

I want to flip icon on hover like this example. I copied and pasted code into my pen and replaced own ids but it does not work. What is going wrong? Thanks in advance!

a #logo-img{
margin: 3px 20px;
-webkit-transition: 0.6s ease-out;
-moz-transition: 0.6s ease-out;
transition: 0.6s ease-out;
}

&:hover {
a #logo-img{
-webkit-transform: rotateZ(720deg);
-moz-transform: rotateZ(720deg);
transform: rotateZ(720deg);
}
}

Answer

Your CSS syntax is off; it's like you wanted to write SCSS or something. With modifying it to

a #logo-img{ 
    margin: 3px 20px; 
    -webkit-transition: 0.6s ease-out;
    -moz-transition:  0.6s ease-out;
    transition:  0.6s ease-out;
}

a #logo-img:hover {
  -webkit-transform: rotateZ(720deg);
  -moz-transform: rotateZ(720deg);
  transform: rotateZ(720deg);
}

it will work.

Comments