-
CSS-Only 3D Flip Menu
HTML
CSS
JavaScript
<nav> <a href="#" data-text="Home"><span>Home</span></a> <a href="#" data-text="About"><span>About</span></a> <a href="#" data-text="Work"><span>Work</span></a> <a href="#" data-text="Contact"><span>Contact</span></a> </nav>
nav{ display:flex; justify-content:center; gap:40px; margin-top:60px; } nav a{ position:relative; text-decoration:none; font-size:22px; color:#111; perspective:500px; } nav a span{ display:inline-block; transition:0.4s; } nav a:hover span{ transform:rotateX(90deg); opacity:0; } nav a:before{ content:attr(data-text); position:absolute; left:0; top:0; color:#ff0066; transform:rotateX(-90deg); transform-origin:top; transition:0.4s; } nav a:hover:before{ transform:rotateX(0deg); opacity:1; }
Live Preview
- CSS-Only 3D Flip Menu