Contact me See Resume

Flip Navigation using HTML and CSS - nareshonline.com

Flip Navigation using HTML and CSS

Catagory : HTML and CSS Posted : September, 07, 2018

Hello friends, In this tutorial we are going to create a Flip Navigation  using HTML and CSS. This is a pure HTML and CSS tutorial. So instead searching a plugin lets write together.

Step 1 :


First we create our HTML markup

<!DOCTYPE html>
<html>
<head>
  <title>Flip Navigation using CSS</title>
</head>
<body>
<div class="container">
  <ul>
    <li><a href="#"><span data-back="Home">Home</span></a></li>
    <li><a href="#"><span data-back="About">About</span></a></li>
    <li><a href="#"><span data-back="Services">Services</span></a></li>
    <li><a href="#"><span data-back="Contact">Contact</span></a></li>
  </ul>
</div>
</body>
</html>

Step 2 :

After creating HTML markup lets style it with css :

*{
  margin: 0;
  padding:0;
  font-family: arial;
  color: #888;
}
.container{
  width: 100vw;
  height: 150px;
  background: skyblue;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container ul{
  list-style-type: none;
  position: absolute;
  margin: 0px;
  padding: 0px;
}
.container ul li{
  float: left;
  background: #fff;
  margin: 2px;
}
.container ul li a{
  text-decoration: none;
  position: relative;
  color: #00f;
  display: block;
  width: 140px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-top: 4px solid #00f;
}
.container ul li a span{
  width: 100%;
  height: 100%;
  background: #fff;
  display: block;
  color: #000;
  transform-style: preserve-3d;
  perspective: 1000;
}
.container ul li a span:before {
  content: attr(data-back);
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  background: #236468;
  color: #fff;
  transform-origin: top;
  transform: rotateX(270deg);
  height: 100%;
  width: 100%;
  transition: .8s;
}
.container ul li a:hover span:before {
  
  transform: rotateX(0deg);
  
}
.container ul li a span:after {
  content: attr(data-back);
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  background: orange;
  color: blue;
  transform-origin: top;
  transform: rotateX(270deg);
  height: 100%;
  width: 100%;
  transition: .8s;
}
.container ul li a:hover span:after {
  transition-delay: 0.3s;
  transform: rotateX(0deg);
  
}

I have try to make things simple. I hope it will help you in your project.

 

Leave a Reply

You have to agree to the comment policy.

  1. Jagmohan says:

    Awsm tutorial thnx..

    1. Naresh Pal says:

      Thanks a lot for appreciation

  2. Manisha Pahuja says:

    Hello naresh ji I am also student of ADMEC .
    It was really nice tutorial thank you.

    1. Manisha Pahuja says:

      Hello naresh ji I am also student of ADMEC .
      It was really nice tutorial thank you

      1. Naresh Pal says:

        Thank you Manisha Pahuja I will try some more on future