Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: Cascading Style Sheets (HTML5 - SCSS - CSS3 & CSS) >> Menus & Navigation >> Pure CSS3 3D Rotating Cards Menu Navigation


Code Snippet </> Info


Snippet Name: Pure CSS3 3D Rotating Cards Menu Navigation

Description: Add a pure CSS3 3D rotating cards menu navigation that is sure to get your visitors attention. This is also a great way to list product information on the backside of rotating cards.
Compatible Browsers:
Chrome BrowserFirefox BrowserSafari Browser
Example: View Code Demo

Note:

Author: Stu Nicholls

Last Modified: 2015-03-20 00:24:37

Language: css

Highlight Mode: css

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying

<!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>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library