Snap Builder HTML5 CSS3 Free Public Codes Library


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pure CSS3 3D Rotating Cards Menu Navigation</title>
<head>
<meta charset="utf-8" />

<style type="text/css">
/* Begin Pure CSS3 3D Rotating Cards Menu Navigation */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */
/* == NOTICE: Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */
/* == Created by: Stu Nicholls : Creative Commons License == */
BODY {
margin:0 auto; width:auto; font-family:verdana,arial,ms sans serif; font-size:90%; background-color:#ffffff; color:#000000; text-shadow:0px 1px 1px rgba(0,0,0,0.2);
}
#content {margin:0px 15px 0px 5px;}
.menu {position:relative; height:40px; font-family:arial, sans-serif; width:750px; background:url('img/shade.png') no-repeat left bottom; border-bottom:3px solid #ddd; margin-left:auto; margin-right:auto; margin-top:350px; margin-bottom:0}
.container {height:50px; width:180px; overflow:hidden; position:absolute; top:-30px; padding-top:20px; z-index:1;
-webkit-transition:0.5s 1s;
-moz-transition:0.5s 1s;
-ms-transition:0.5s 1s;
-o-transition:0.5s 1s;
transition:0.5s 1s;
}
.menu .p1 {left:8px;}
.menu .p2 {left:193px;}
.menu .p3 {left:378px;}
.menu .p4 {left:563px;}
.container:hover {height:452px; top:-432px;
transition-delay:0s;
-o-transition-delay:0s;
-moz-transition-delay:0s;
-ms-transition-delay:0s;
-webkit-transition-delay:0s;
}
.container div h1 {padding:0; margin:0; line-height:40px; color:#fff; font-size:18px; text-align:center; font-style:italic;}
.container div h2 {padding:50px 15px 25px 15px; margin:0; line-height:18px; color:#fc6; font-size:14px; text-align:center; font-style:italic;}
.container div ol li {font-size:12px; color:#fff; line-height:20px;}
.container div ol li a {margin:0; line-height:18px; color:#ffff00; font-size:12px; text-align:left; text-decoration:none;}
.container div ol li a:hover {color:#00ff00;}
.container div img {display:block; border:0; margin:30px auto;}
.container {
-webkit-perspective:1000px;
-moz-perspective:1000px;
-o-perspective:1000px;
-ms-perspective:1000px;
perspective:1000px;
}
.card {
width:180px; height:380px;
-webkit-transition:1s 0s;
-moz-transition:1s 0s;
-ms-transition:1s 0s;
-o-transition:1s 0s;
transition:1s 0s;
-moz-transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
-o-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
transform-style:preserve-3d;
}
.obverse {
position:absolute;
width:180px; height:362px;
background:#036 url('../pure_css_card_flipping_menu/linear-gradient(30deg,%20rgba(255,%20255,%20255,0');
background-image:-moz-linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
background-image:-webkit-linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
background-image:-ms-linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
background-image:-o-linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
-ms-border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -o-backface-visibility:hidden; -ms-backface-visibility:hidden; backface-visibility:hidden; background-image:url('../pure_css_card_flipping_menu/linear-gradient(30deg,%20rgba(255,%20255,%20255,0')
}
.reverse {
position:absolute;
width:180px; height:362px;
background:#060 url('../pure_css_card_flipping_menu/linear-gradient(30deg,%20rgba(255,%20255,%20255,0');
background-image:-moz-linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
background-image:-webkit-linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
background-image:-ms-linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
background-image:-o-linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
-ms-border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -o-backface-visibility:hidden; -ms-backface-visibility:hidden; backface-visibility:hidden; -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg); -o-transform:rotateY(180deg); -ms-transform:rotateY(180deg); transform:rotateY(180deg); background-image:url('../pure_css_card_flipping_menu/linear-gradient(30deg,%20rgba(255,%20255,%20255,0')
}
.container:hover .card {
transition-delay:0.5s;
-o-transition-delay:0.5s;
-moz-transition-delay:0.5s;
-ms-transition-delay:0.5s;
-webkit-transition-delay:0.5s;
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
-o-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
transform:rotateY(180deg);
}
</style>

</head>
<body>

<div id="content">
<h2>Pure CSS3 3D Rotating Cards Menu Navigation</h2>
<p>For Firefox, Safari and Chrome</p>
<p>Roll your cursor over the navigation bar below for an example.<br />
[ This code example from <a href="http://snapbuilder.com/code_snippets/snippet.php?sid=199">Pure CSS3 3D Drop List Menu Navigation Code Snippet</a> page. ]</p>

<div class="menu">
<div class="container p1">
<div class="card">
<div class="obverse">
<h1>CAMERAS</h1>
<img src="img/cameras.png" alt="" />
</div>
<div class="reverse">
<h2>Cameras and Camera Equipment</h2>
<ol>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">Duis velit leo</a></li>
<li><a href="#">Aliquam quis magna</a></li>
<li><a href="#">Sed et orci</a></li>
<li><a href="#">In risus libero</a></li>
<li><a href="#">Nunc sed</a></li>
</ol>
</div></div></div>
<div class="container p2">
<div class="card">
<div class="obverse">
<h1>HEADPHONES</h1>
<img src="img/headphones.png" alt="" />
</div>
<div class="reverse">
<h2>Electronic Equipment</h2>
<ol>
<li><a href="#">Praesent ullam</a></li>
<li><a href="#">Phasellus tempor</a></li>
<li><a href="#">Etiam eleifend nisi</a></li>
<li><a href="#">Fusce venenatis</a></li>
<li><a href="#">Vivamus vitae</a></li>
</ol>
</div></div></div>
<div class="container p3">
<div class="card">
<div class="obverse">
<h1>GAMES</h1>
<img src="img/games.png" alt="" />
</div>
<div class="reverse">
<h2>Computer Games and Software</h2>
<ol>
<li><a href="#">In et arcu eget</a></li>
<li><a href="#">Quisque nibh odio</a></li>
<li><a href="#">Phasellus sagittis</a></li>
<li><a href="#">Curabitur varius</a></li>
<li><a href="#">Suspendisse diam</a></li>
<li><a href="#">Class aptent</a></li>
</ol>
</div></div></div>
<div class="container p4">
<div class="card">
<div class="obverse">
<h1>AUDIO</h1>
<img src="img/audio.png" alt="" />
</div>
<div class="reverse">
<h2>Audio Equipment</h2>
<ol>
<li><a href="#">Nunc velit arcu</a></li>
<li><a href="#">Pellentesque</a></li>
<li><a href="#">Nulla porta lacinia</a></li>
<li><a href="#">Aliquam aliquet</a></li>
<li><a href="#">Curabitur tristique</a></li>
</ol>
</div></div></div></div>

<br /><br />
<div id="snippet">
[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_199.html">Pure CSS3 3D Rotating Cards Menu Navigation</a> page. ]
</div>

</div>
</body>
</html>