body {
    background-color: #ddd;
    font-size: 100%;
    padding: 3em;
}
.mainNav {
    float: left;
    transform: perspective(500px);
    transform-style: preserve-3d;
	margin-left:300px;
}
.mainNav ul {
  list-style: none;
  padding: 0;
  position: relative;
}
.mainNav ul:after {
  background-color: hsla(0,0%,0%,0.1);
  box-shadow: 0 0.09375em 0.1875em 0.1875em hsla(0,0%,0%,0.1);
  content: '';
  height: 0.375em;
  left: 0.75em;
  position: absolute;
  right: 0.75em;
  top: 100%;
  z-index: -1;
}
.mainNav a {
    background-color: #f79533;
    background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05)),
                      linear-gradient(-197.5deg, hsla(0,0%,100%,.025) 50%, transparent 50%);
    backface-visibility: hidden;
    box-shadow: inset 0 0 .125em hsla(0,0%,0%,.25),
                inset 0 0 1.5em hsla(0,0%,0%,.25);
    color: #333;
    display: block;
    font: bold 1em/3 sans-serif;
    padding: 0 1.5em;
    position: relative;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 1px hsla(0,0%,100%,.25);
    transition: .5s;
    transform-origin: 50% 0;
    transform-style: preserve-3d;
    width: 6em;
}
.mainNav a:after {
    background-color: inherit;
    background-image: linear-gradient(hsla(0,0%,100%,.05), hsla(0,0%,0%,.05)),
                      linear-gradient(-197.5deg, hsla(0,0%,100%,.025) 50%, transparent 50%),
                      linear-gradient(hsla(0,0%,0%,.25), hsla(0,0%,0%,.25));
    box-shadow: inset 0 0 .25em hsla(0,0%,0%,.2),
                inset 0 0 1.5em hsla(0,0%,0%,.3);
    bottom: 0;
    color: #fff;
    content: attr(data-title);
    left: 100%;
    line-height: 3;
    position: absolute;
    top: 0;
    transform: rotateY(90deg);
    transform-origin: 0 0;
    width: 100%;
}
.mainNav a:before {
    background-color: inherit;
    background-image: linear-gradient(hsla(0,0%,100%,.07), hsla(0,0%,0%,.07)),
                      linear-gradient(hsla(0,0%,0%,.5), hsla(0,0%,0%,.5));
    bottom: 0;
    content: '';
    height: 9em;
    left: 100%;
    position: absolute;
    top: 0;
    transform-origin: 0 0;
    width: 100%;
}
.mainNav li:nth-child(-n+2) a:before {
    transform: rotateX(-90deg) translateX(-9em) translateZ(3em);
}
.mainNav li:nth-child(n+3) a:before {
    transform: rotateX(-90deg) translateX(-9em);
}
.mainNav li:hover a {
    transform: rotateY(-90deg) translateX(-4.5em) translateZ(4.5em);
    z-index: 100;
}​