A CodePen by Matt Null. 3D kiosk menu - This is part of a menu I built for the kiosks at SXSW 2013. It uses -webkit-perspective and some transforms Concept design by @zherring

index.html

<header>
  <nav kiosk-nav="true">
    <div class="logo"></div>
    <div class="options">
      <div class="option shuttle selected">
        <div class="container">
          <div class="box">
            <figure class="front"></figure>
            <figure class="back"></figure>
            <figure class="right"></figure>
            <figure class="left"></figure>
            <figure class="top"></figure>
            <figure class="bottom"></figure>
          </div>
        </div>
        <div class="title">item</div>
      </div>
      <div class="option events">
        <div class="container">
          <div class="box">
            <figure class="front"></figure>
            <figure class="back"></figure>
            <figure class="right"></figure>
            <figure class="left"></figure>
            <figure class="top"></figure>
            <figure class="bottom"></figure>
          </div>
        </div>
        <div class="title">item</div>
      </div>
      <div class="option updates">
        <div class="container">
          <div class="box">
            <figure class="front"></figure>
            <figure class="back"></figure>
            <figure class="right"></figure>
            <figure class="left"></figure>
            <figure class="top"></figure>
            <figure class="bottom"></figure>
          </div>
        </div>
        <div class="title">item</div>
      </div>
      <div class="option updates">
        <div class="container">
          <div class="box">
            <figure class="front"></figure>
            <figure class="back"></figure>
            <figure class="right"></figure>
            <figure class="left"></figure>
            <figure class="top"></figure>
            <figure class="bottom"></figure>
          </div>
        </div>
        <div class="title">item</div>
      </div>
      <div class="option updates">
        <div class="container">
          <div class="box">
            <figure class="front"></figure>
            <figure class="back"></figure>
            <figure class="right"></figure>
            <figure class="left"></figure>
            <figure class="top"></figure>
            <figure class="bottom"></figure>
          </div>
        </div>
        <div class="title">item</div>
      </div>
      <div class="option updates">
        <div class="container">
          <div class="box">
            <figure class="front"></figure>
            <figure class="back"></figure>
            <figure class="right"></figure>
            <figure class="left"></figure>
            <figure class="top"></figure>
            <figure class="bottom"></figure>
          </div>
        </div>
        <div class="title">item</div>
      </div> 
    </div>
  </nav>
</header>

script.coffee

$nav = $('nav[kiosk-nav]')
$navOptions = $nav.find('.option')

#adjust z-index of options
len = $navOptions.length
$navOptions.each () ->
  $(this).css('zIndex',len)
  len--
    
index = 1
len = $navOptions.length
setInterval () =>
  index++
  $navOptions.removeClass('selected')
  $navOptions.removeClass('flip')
  current = $navOptions.eq(index-1)
  current.addClass('flip').addClass('selected')
  
  if index >= len
    index = 0
, 2000

    

style.css

header{color:#fff;position:fixed;top:0;width:100%;z-index:1;text-align:center;margin:50px 0 0 0;-webkit-perspective:600;}
header nav{width:180%;margin:0 auto;text-align:center;-webkit-transform:rotateY(40deg);-webkit-transform-origin:0 0;}
header nav div.option{height:75px;width:150px;float:left;position:relative;top:4px;z-index:4;-webkit-transition:all .2s ease-in-out;}
header nav div.options{margin-left:150px}
header nav div.title{color:#505359;position:absolute;z-index:5;font-size:2.2em;font-family:Georgia;font-style:italic;text-align:center;width:100%;-webkit-transition:all .5s ease-in-out}

.container{width:157px;height:75px;position:relative;top:-5px}
.box{width:100%;height:100%;position:absolute;z-index:1;-webkit-transform-style:preserve-3d;-webkit-transform:rotateY(23deg) rotateX(-46deg);-webkit-transition:all .5s ease-in-out;left:-44px}
.option.selected .title{color:#c05139;text-shadow:0 0 1px #000}
.option.selected .box{-webkit-transform:rotateY(23deg) rotateX(317deg);}
.option.selected .box .top{background:#f69460}
.option.selected .box .front{background:#5d220a}
.box figure{display:block;position:absolute}
.box .front,.box .back{width:157px;height:50px}
.box .right,.box .left{width:37px;height:37px}
.box .top,.box .bottom{width:157px;height:50px}
.box .front{background:#313a41;-webkit-transform:rotateY(0) translateZ(25px)}
.box .back{-webkit-transform:rotateX(180deg) translateZ(25px)}
.box .right{-webkit-transform:rotateY(90deg) translateZ(39px)}
.box .left{-webkit-transform:rotateY(-90deg) translateZ(20px)}
.box .top{background:#505359;-webkit-transform:rotateX(90deg) translateZ(24px)}
.box .bottom{-webkit-transform:rotateX(-90deg) translateZ(-24px)}