Rotating links hover effect

      No Comments on Rotating links hover effect

Rotating links hover effect using CSS only transitions.

Rotating links hover effect

Rotating links hover effect

HTML:

<ul class="navigation-1">
  <li><a href='#'>Home</a></li>
  <li><a href='#'>work</a></li>
  <li><a href='#'>blog</a></li>
  <li><a href='#'>services</a></li>
  <li><a href='#'>helpcenter</a></li>
</ul>

CSS:

.navigation-1 li
{
  list-style-type:none;
  display:inline;
  margin:15px 50px;
  position:relative;
}
.navigation-1 a
{
  text-decoration:none;
  text-transform:uppercase;
  font-family:arial;
  color:#e6e6e6;
  position:absolute;
}
.navigation-1 a:hover{
  -webkit-transition: all .35s linear;
  transition: all .35s linear;
  color: #2980b9;
-webkit-transform: rotateX(360deg);
  transform: rotateX(360deg);
}

Demo:

See the Pen Menu by scanfcode (@scanfcode) on CodePen.


Comment below if you are facing any problem and subscribe to our newsletter for latest update.


Also read

Registration form for a company in HTML and CSS
Facebook like add a post form – for blogs
how to create a icon showing hover effect

Summary
Rotating links hover effect
Article Name
Rotating links hover effect
Description
Rotating links hover effect using css transitions. This code will rotate the link when it is hovered.
Author
Publisher Name
Scanfcode
Publisher Logo

Leave a Reply

Your email address will not be published. Required fields are marked *