Snap Builder HTML5 CSS3 Free Public Codes Library


<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Animated 3D Flipping Menu with CSS</title>

<style>
/* Begin Animated 3D Flipping Menu with CSS */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The https://snapbuilder.com Free Public Codes Library == */
/* == NOTICE:Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */
* {margin:0px;padding:0px;}
.snap-menu {display:block;background:#cccccc;-webkit-box-shadow:inset 2px 4px 16px 0px rgba(0,0,0,0.4);-moz-box-shadow:inset 2px 4px 16px 0px rgba(0,0,0,0.4);box-shadow:inset 2px 4px 16px 0px rgba(0,0,0,0.4);}
.snap-menu li {display:inline-block;}
.snap-menu li a {overflow:visible;display:block;padding:15px 10px;font-family:'Passion One', Arial, sans-serif;font-smoothing:antialiased;font-size:24px;line-height:20px;text-transform:uppercase;text-decoration:none;color:#ffffff;}
.snap-box {perspective:200px;transition:all .07s linear;position:relative;cursor:pointer;}
.snap-box:hover .snap-flip, .snap-box:focus .snap-flip {transform:translateZ(-25px) rotateX(90deg);}
.snap-flip {transition:all .3s ease-out;transform:translatez(-25px);transform-style:preserve-3d;pointer-events:none;position:absolute;top:0;left:0;display:block;width:100%;height:100%;}
.snap-front {transform:rotatex(0deg) translatez(25px);}
.snap-back {transform:rotatex(-90deg) translatez(25px);color:#ffe7c4;}
.snap-front {display:block;width:100%;height:100%;position:absolute;top:0;left:0;background:#bbbbbb;padding:15px 10px;color:#770000;text-shadow:0px 1px 1px rgba(0,0,0,0.2);pointer-events:none;box-sizing:border-box;}
.snap-back {display:block;width:100%;height:100%;position:absolute;top:0;left:0;background:#007730;padding:15px 10px;color:#eeeeee;text-shadow:0px 1px 1px rgba(0,0,0,0.2);pointer-events:none;box-sizing:border-box;-moz-box-shadow:0 8px 6px -6px #333;box-shadow:0 8px 6px -6px #333;}
.content {margin:50px 0 0 15px;font-family:arial,sans serif;font-size:100%;}
</style>

</head>
<body>

<ul class="snap-menu">

<li><a href="index.html" class="snap-box">
Home
<span class="snap-flip"><span class="snap-front">Home</span><span class="snap-back">Home</span></span>
</a></li>

<li><a href="new-arrivals.html" class="snap-box">
New Arrivals
<span class="snap-flip"><span class="snap-front">New Arrivals</span><span class="snap-back">New Arrivals</span></span>
</a></li>

<li><a href="special-offers.html" class="snap-box">
Special Offers
<span class="snap-flip"><span class="snap-front">Special Offers</span><span class="snap-back">Special Offers</span></span>
</a></li>

<li><a href="new-relase.html" class="snap-box">
New Releases
<span class="snap-flip"><span class="snap-front">New Releases</span><span class="snap-back">New Releases</span></span>
</a></li>

<li><a href="clearance.html" class="snap-box">
Clearance Rack
<span class="snap-flip"><span class="snap-front">Clearance Rack</span><span class="snap-back">Clearance Rack</span></span>
</a></li>

<li><a href="about.html" class="snap-box">
About Us
<span class="snap-flip"><span class="snap-front">About Us</span><span class="snap-back">Really!</span></span>
</a></li>

</ul>

<div class="content">
Roll your mouse over the navigation links above to preview the effect.<br />
You can have a menu flip a different text word - hover over the About Us tab for an example.

<br /><br />

[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_260.html">Animated 3D Flipping Menu with CSS Code Snippet</a> page. ]
</div>

</body>
</html>