Responsive design 3D Flip Menu Pure CSS

Today I am going to share awesome 3d design flip menu purely made with CSS, which you can use on your website, whenever you hover the menu it display an awesome 3d flip animation with submenu.
Responsive design 3D Flip Menu Pure CSS

HTML

 
<nav>
  <ol class="main-menu">
    <li class="main-item"><span class="home"></span></li>
    <li class="main-item"><span class="about"></span></li>
    <li class="main-item"><span class="widgets"></span>
      <ol class="sub-menu">
        <li class="sub-item item-left"><span class="small"></span></li>
        <li class="sub-item item-left"><span class="standart"></span></li>
        <li class="sub-item item-left"><span class="big"></span></li>
      </ol>
    </li>
    <li class="main-item"><span class="kabobs"></span>
      <ol class="sub-menu">
        <li class="sub-item item-right"><span class="premium"></span></li>
        <li class="sub-item item-right"><span class="combo"></span></li>
        <li class="sub-item item-right"><span class="special"></span></li>
      </ol>
    </li>
    <li class="main-item"><span class="contact"></span></li>
  </ol>
</nav>
<a class="me" href="https://codepen.io/uzcho_/pens/popular/?grid_type=list" target="_blank" style="color:#000" rel="noopener noreferrer"></a>


CSS

@charset "UTF-8";
:root {
  --z24: translateZ(24.5px);
  --z80: translateZ(80px);
  --ts: all .5s ease;
  --x90: rotateX(90deg);
  --xm90: rotateX(-90deg);
  --y90: rotateY(90deg);
  --ym90: rotateY(-90deg);
}
 
nav {
  width: 100%;
  padding: 16px 16px 0 16px;
  position: relative;
}
 
ol {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
 
.main-menu {
  display: -webkit-box;
  display: flex;
  position: relative;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-flow: row wrap;
  -webkit-box-pack: center;
          justify-content: center;
}
 
li {
  width: 160px;
  position: relative;
  cursor: pointer;
}
li span {
  width: 100%;
  height: 49px;
  display: block;
  position: relative;
  -webkit-transition: var(--ts);
  transition: var(--ts);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
li span::before, li span::after {
  width: 100%;
  padding: 16px 0;
  display: block;
  position: absolute;
  border-radius: 8px;
  font: 400 14px "Consolas";
  text-align: center;
  text-transform: uppercase;
}
 
.main-item:nth-of-type(2),
.main-item:nth-of-type(4) {
  margin: 0 2px;
}
 
.main-item:nth-of-type(3)::before,
.main-item:nth-of-type(4)::before {
  width: 100%;
  top: 25px;
  display: block;
  position: absolute;
  color: #fff;
  font: 400 24px "Consolas";
  text-align: center;
  -webkit-transition: var(--ts);
  transition: var(--ts);
  z-index: 100;
  content: "▾";
}
 
.main-item:hover > span {
  -webkit-transform: var(--x90);
          transform: var(--x90);
}
.main-item > span::before {
  background: #000;
  color: #fff;
  -webkit-transform: var(--z24);
          transform: var(--z24);
  box-shadow: 0 8px 6px -6px #888;
}
.main-item > span::after {
  background: #ff9900;
  -webkit-transform: var(--xm90) var(--z24);
          transform: var(--xm90) var(--z24);
}
 
.home::before, .home::after {
  content: "home";
}
 
.about::before, .about::after {
  content: "about";
}
 
.widgets::before, .widgets::after {
  content: "widgets";
}
 
.kabobs::before, .kabobs::after {
  content: "kabobs";
}
 
.contact::before, .contact::after {
  content: "contact";
}
 
.sub-menu {
  top: 51px;
  display: none;
  position: absolute;
}
.sub-menu li {
  opacity: 0;
  -webkit-transform: translateY(-10px);
          transform: translateY(-10px);
}
.sub-menu li:nth-of-type(2) {
  margin: 2px 0;
}
 
.sub-item:nth-of-type(1) {
  -webkit-animation: fade 0.5s ease 0.2s both;
          animation: fade 0.5s ease 0.2s both;
}
 
.sub-item:nth-of-type(2) {
  -webkit-animation: fade 0.5s ease 0.4s both;
          animation: fade 0.5s ease 0.4s both;
}
 
.sub-item:nth-of-type(3) {
  -webkit-animation: fade 0.5s ease 0.6s both;
          animation: fade 0.5s ease 0.6s both;
}
 
@-webkit-keyframes fade {
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
 
@keyframes fade {
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
.sub-item span::before {
  background: #008080;
  color: #fff;
  -webkit-transform: var(--z80);
          transform: var(--z80);
}
.sub-item span::after {
  background: #bc003b;
  color: #fff;
}
 
.item-left:hover span {
  -webkit-transform: var(--y90);
          transform: var(--y90);
}
.item-left span::after {
  -webkit-transform: var(--ym90) var(--z80);
          transform: var(--ym90) var(--z80);
}
 
.item-right:hover span {
  -webkit-transform: var(--ym90);
          transform: var(--ym90);
}
.item-right span::after {
  -webkit-transform: var(--y90) var(--z80);
          transform: var(--y90) var(--z80);
}
 
.small::before, .small::after {
  content: "small widgets";
}
 
.standart::before, .standart::after {
  content: "standart widgets";
}
 
.big::before, .big::after {
  content: "big widgets";
}
 
.premium::before, .premium::after {
  content: "premium kabobs";
}
 
.combo::before, .combo::after {
  content: "combo kabobs";
}
 
.special::before, .special::after {
  content: "special kabobs";
}
 
.main-item:nth-of-type(3):hover::before,
.main-item:nth-of-type(4):hover::before {
  color: #000;
  content: "▴";
}
.main-item:nth-of-type(3):hover .sub-menu,
.main-item:nth-of-type(4):hover .sub-menu {
  display: block;
}
 
@media screen and (min-width: 321px) and (max-width: 839px) {
  nav {
    width: 320px;
    margin: 0 auto;
  }
}
@media (max-width: 839px) {
  .main-item:nth-of-type(2),
  .main-item:nth-of-type(4) {
    margin: 3px 0;
  }
 
  .sub-menu {
    position: relative;
    top: 1px;
    padding: 2px 0 1px 0;
  }
  .sub-menu li span::before {
    -webkit-transform: var(--z24);
            transform: var(--z24);
  }
  .sub-menu li span::after {
    -webkit-transform: rotateY(0deg) var(--x90) var(--z24);
            transform: rotateY(0deg) var(--x90) var(--z24);
  }
  .sub-menu li:hover span {
    -webkit-transform: var(--xm90);
            transform: var(--xm90);
  }
}



See live demo and download source code.
|

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

This awesome script developed by uzcho_. Visit their official repository for more information and follow for future updates.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.