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.
HTML
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.