CSS3 Flipping Menu Buttons

These cards are using -webkit-transform: rotateY() and rotateX(); with some of the 3D settings: -webkit-transform-style: preserve3d; and -webkit-transform-perspective.
Mozilla browsers are using the -moz-transform equivalents.

 Index.html                                                                                                               Download script          
  1. <body> <ul class="flatflipbuttons"> <li><a href="#" title="Search"><span class="icon-search"></span></a> <b>Bhaskar</b></li> <li><a href="#"><span class="icon-gears"></span></a> <b>Suresh</b></li> <li><a href="#"><span class="icon-rss"></span></a> <b>Mahesh</b></li> <li><a href="#"><span class="icon-twitter"></span></a> <b>Ganesh</b></li> <li><a href="#"><span class="icon-rocket"></span></a> <b>Naresh</b></li> </ul> </body>

  1. <style> <style> <link href="http://netdna.bootstrapcdn.com /font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"> <style> ul.flatflipbuttons { margin:0; padding:0; list-style:none; -webkit-perspective: 10000px; -moz-perspective: 10000px; perspective: 10000px; } ul.flatflipbuttons li { margin: 0; display: inline-block; width: 100px; /* dimensions of buttons. */ height: 100px; margin-right: 15px; /* spacing between buttons */ background: white; text-transform: uppercase; text-align: center; } ul.flatflipbuttons li a { display: table; font: bold 36px Arial; width: 100%; height: 100%; margin-bottom: 4px; color: black; background: #3B9DD5; text-decoration: none; outline: none; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; transition: all 300ms ease-out; } ul.flatflipbuttons li:nth-of-type(1) a { color: white; background: red; } ul.flatflipbuttons li:nth-of-type(2) a { background: #A1CD3A; } ul.flatflipbuttons li:nth-of-type(3) a { background: #80C5EC; } ul.flatflipbuttons li:nth-of-type(4) a { color: white; background: #0000FF; } ul.flatflipbuttons li:nth-of-type(5) a { background: #FF00FF; } ul.flatflipbuttons li a span { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; display: table-cell; vertical-align: middle; width: 100%; height: 100%; -webkit-transition: all 300ms ease-out; /* CSS3 transition. */ -moz-transition: all 300ms ease-out; transition: all 300ms ease-out; } ul.flatflipbuttons li b { /* CSS for text beneath button */ display: block; position: relative; width: 100%; opacity: 0; -webkit-transition: all 300ms ease-out 0.2s; /* CSS3 transition. 0.2s delay */ -moz-transition: all 300ms ease-out 0.2s; transition: all 300ms ease-out 0.2s; } ul.flatflipbuttons li a img { /* CSS for image if defined inside button */ border-width: 0; vertical-align: middle; } ul.flatflipbuttons li:hover a { -webkit-transform: rotateY(180deg); /* flip horizontally 180deg*/ -moz-transform: rotateY(180deg); transform: rotateY(180deg); background: #c1e4ec; /* bgcolor of button onMouseover*/ -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; transition-delay: 0.2s; } ul.flatflipbuttons li:hover a span { color: black; /* color of icon font onMouseover */ -webkit-transform: rotateY(180deg); -moz-transform: rotateY(180deg); /* flip horizontally 180deg*/ transform: rotateY(180deg); -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; transition-delay: 0.2s; } ul.flatflipbuttons li:hover b { opacity: 1; } /* CSS for 2nd menu below specifically */ ul.second li a { background: #eee !important; } ul.second li a:hover { background: #ddd !important; } </style>

Download Script

Next Post »