Skip to main content

Return to Answer

correct formatting
Source Link
Eric
Eric
  • 6.4k
  • 6
  • 50
  • 72

if you want to rotate inline elements, you should set the inline element to inline-block first.

i { display: inline-block; } i:hover { animation: rotate-btn .5s linear 3; -webkit-animation: rotate-btn .5s linear 3; } @keyframes rotate-btn { 0% { transform: rotate(0); } 100% { transform: rotate(-360deg); } } 
i { display: inline-block; } i:hover { animation: rotate-btn .5s linear 3; -webkit-animation: rotate-btn .5s linear 3; } @keyframes rotate-btn { 0% { transform: rotate(0); } 100% { transform: rotate(-360deg); } }

if you want to rotate inline elements, you should set the inline element to inline-block first.

i { display: inline-block; } i:hover { animation: rotate-btn .5s linear 3; -webkit-animation: rotate-btn .5s linear 3; } @keyframes rotate-btn { 0% { transform: rotate(0); } 100% { transform: rotate(-360deg); } }

if you want to rotate inline elements, you should set the inline element to inline-block first.

i { display: inline-block; } i:hover { animation: rotate-btn .5s linear 3; -webkit-animation: rotate-btn .5s linear 3; } @keyframes rotate-btn { 0% { transform: rotate(0); } 100% { transform: rotate(-360deg); } }
removed extra `
Source Link
Eric
Eric
  • 6.4k
  • 6
  • 50
  • 72

if you want to rotate inline elements, you should set the inline element to inline-block first.

 i {   display: inline-block;  }  i:hover {   animation: rotate-btn .5s linear 3;   -webkit-animation: rotate-btn .5s linear 3;  }  @keyframes rotate-btn {   0% {   transform: rotate(0);   }   100% {   transform: rotate(-360deg);   }  }

if you want to rotate inline elements, you should set the inline element to inline-block first.

 i {   display: inline-block;  }  i:hover {   animation: rotate-btn .5s linear 3;   -webkit-animation: rotate-btn .5s linear 3;  }  @keyframes rotate-btn {   0% {   transform: rotate(0);   }   100% {   transform: rotate(-360deg);   }  }

if you want to rotate inline elements, you should set the inline element to inline-block first.

i { display: inline-block; } i:hover { animation: rotate-btn .5s linear 3; -webkit-animation: rotate-btn .5s linear 3; } @keyframes rotate-btn { 0% { transform: rotate(0); } 100% { transform: rotate(-360deg); } }
Source Link
Kyle
Kyle
  • 41
  • 2

if you want to rotate inline elements, you should set the inline element to inline-block first.

 i { display: inline-block; } i:hover { animation: rotate-btn .5s linear 3; -webkit-animation: rotate-btn .5s linear 3; } @keyframes rotate-btn { 0% { transform: rotate(0); } 100% { transform: rotate(-360deg); } }