<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="wrapcube"> <div class="cube" id="a"> <div class="side front">HOVER ME</div> <div class="side left"></div> <div class="side right"></div> <div class="side back"></div> <div class="side top"></div> <div class="side bottom"></div> </div> <div class="cube" id="b"> <div class="side front">HOVER ME</div> <div class="side left"></div> <div class="side right"></div> <div class="side back"></div> <div class="side top"></div> <div class="side bottom"></div> </div> <div class="cube" id="c"> <div class="side front">HOVER ME</div> <div class="side left"></div> <div class="side right"></div> <div class="side back"></div> <div class="side top"></div> <div class="side bottom"></div> </div> <div class="cube" id="d"> <div class="side front">HOVER ME</div> <div class="side left"></div> <div class="side right"></div> <div class="side back"></div> <div class="side top"></div> <div class="side bottom"></div> </div> <div class="cube" id="e"> <div class="side front">HOVER ME</div> <div class="side left"></div> <div class="side right"></div> <div class="side back"></div> <div class="side top"></div> <div class="side bottom"></div> </div> <div class="cube" id="f"> <div class="side front">HOVER ME</div> <div class="side left"></div> <div class="side right"></div> <div class="side back"></div> <div class="side top"></div> <div class="side bottom"></div> </div> <div class="cube" id="g"> <div class="side front">HOVER ME</div> <div class="side left"></div> <div class="side right"></div> <div class="side back"></div> <div class="side top"></div> <div class="side bottom"></div> </div> </div> <h1>rotate menu<br/><small>by Wagner Moschini</small></h1> <script> var $el = $(".cube"); var rotate = function(index){ var index = index || 0; $el.each(function(e){ $(this).attr("data-rotate",Math.abs($(this).index() - index)); }); } $el.hover(function(e){ var index = $(this).index(); rotate(index); }); rotate(0); </script>

*{ margin:0; padding:0; } body{ color:#fff; background:#2c3e50; font-size: 12px; min-width: 800px; display: block; position: relative; } .wrapcube{ perspective: 2000px; perspective-origin: center center; width:200px; height:320px; position:absolute; top:50px; left:50px; } .cube{ width:100%; height:50px; margin:0 0 0 0; position:relative; transition:.25s all ease-out; transform-style: preserve-3d; font-family: arial, helvetica, sans-serif; text-align: center; line-height: 4.5; } #a{z-index:1;} #b{z-index:2;} #c{z-index:3;} #d{z-index:4;} #e{z-index:3;} #f{z-index:2;} #g{z-index:1;} .cube[data-rotate='1']{ transform: rotateY(3deg) translateZ(-00px) translateX(0px); } .cube[data-rotate='2']{ transform: rotateY(6deg) translateZ(-00px) translateX(0px); } .cube[data-rotate='3']{ transform: rotateY(9deg) translateZ(-00px) translateX(0px); } .cube[data-rotate='4']{ transform: rotateY(12deg) translateZ(-00px) translateX(0px); } .cube[data-rotate='5']{ transform: rotateY(15deg) translateZ(-00px) translateX(0px); } .cube[data-rotate='6']{ transform: rotateY(18deg) translateZ(-00px) translateX(0px); } .side{ width:100%; height:100%; position:absolute; backface:hidden; } .front { height:50px; transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg) translateZ(100px); } .left { height:50px; transform: rotateY(-90deg) rotateX(0deg) rotateZ(0deg) translateZ(100px); } .right { height:50px; transform: rotateY(90deg) rotateX(0deg) rotateZ(0deg) translateZ(100px); } .back { height:50px; transform: rotateY(-180deg) rotateX(0deg) rotateZ(0deg) translateZ(100px); } .top { height:200px; transform: rotateY(0deg) rotateX(90deg) rotateZ(0deg) translateZ(100px); } .bottom { height:200px; transform: rotateY(0deg) rotateX(-90deg) rotateZ(0deg) translateZ(-50px); } #a .side{ background:#16a085; } #a .front{ background:#1abc9c; } #b .side{ background:#27ae60; } #b .front{ background:#2ecc71; } #c .side{ background:#2980b9; } #c .front{ background:#3498db; } #d .side{ background:#8e44ad; } #d .front{ background:#9b59b6; } #e .side{ background:#f39c12; } #e .front{ background:#f1c40f; } #f .side{ background:#d35400; } #f .front{ background:#e67e22; } #g .side{ background:#c0392b; } #g .front{ background:#e74c3c; } h1{ font-size: 8em; font-family: 'Lobster Two'; font-style: italic; text-align: right; line-height: .3; display: table; position: absolute; top: 60px; right: 30px; text-shadow: 2px 4px rgba(0,0,0,.3); color: #ecf0f1; } h1 small{ font-size: .2em; }