<div class="screen">
  <div id="cube">
    <figure>
      <label id="menu" class="select-label">
          Menu
          <i class="glyphicon glyphicon-chevron-right"></i>
      </label>
    </figure>

    <figure>
      <ul>
        <li id="close"><i class="glyphicon glyphicon-remove"></i></li>
        <li class='cs-selected' data-value="1"><span>Artists</span></li>
        <li class='cs-selected' data-value="2"><span>Schedule</span></li>
        <li class='cs-selected' data-value="3"><span>Gallary</span></li>
        <li class='cs-selected' data-value="4"><span>About</span></li>
      </ul>
      <div class="dummy-content">
        <div class="dummy-title" data-link="1"><span>Artists</span> <i class="glyphicon glyphicon-remove dum-close"></i></div>
        <div class="dummy-title" data-link="2"><span>Schedule</span> <i class="glyphicon glyphicon-remove dum-close"></i></div>
        <div class="dummy-title" data-link="3"><span>Gallary</span> <i class="glyphicon glyphicon-remove dum-close"></i></div>
        <div class="dummy-title" data-link="4"><span>About</span> <i class="glyphicon glyphicon-remove dum-close"></i></div>

        <div class="dummy">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
    </figure>
  </div>
</div>
<div class="shadow"></div>
</body>

	@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css);
@import url('https://fonts.googleapis.com/css?family=Quicksand');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: all 0.5s ease;
  font-family: 'Quicksand', sans-serif;
}

body { 
/*   background: #71B8E6; */
  padding-top: 1%;
  font-size: 15px;
}

.screen {
  margin: 30px auto 0 auto;
  border-radius: 1em;
  background: #f2f2f2;
  width: 320px;
  height: 520px;
  position: relative;
  perspective: 1000px;
  overflow: hidden;
  box-shadow: 0px 10px 30px 0 rgba(0,0,0,0.2);
}
		
.shadow{
	position: absolute;
	margin: -5px auto;
	left :0; right:0;
	border-radius: 100%;
	box-shadow: 0px 0px 30px 30px rgba(0,0,0,0.2);
	width: 360px;
	height: 10px;
	background: rgba(0,0,0,0.2);
	z-index: -1;
}

#cube {
  width: 320px;
  height: 520px;
  position: absolute;
  transform-style: preserve-3d;
  transform: translateZ(-160px) rotateY(0deg);
}

#cube figure {
/*   margin-top: 40px; */
  width: 320px;
  margin: 0;
  min-height: 250px;
  display: block;
  position: absolute;
  color: #f2f2f2;
  height: 100%;
  background:#524364;
}

figure:nth-child(1){
  opacity: 1; 
  transform: rotateY(0deg) translateZ(160px) ;
}

figure:nth-child(2){
  opacity: 1; 
  transform: rotateY(90deg) translateZ(160px) ;
}

label.select-label {
  display: block;
  text-transform: uppercase;
  padding: 1.1em 1.5em;
  letter-spacing: 1px;
  text-align:right;
  background : #40C8C4 ;
  color: #f2f2f2;
  cursor: pointer;
  box-shadow: 0 0px 20px 0 rgba(25, 42, 119, 0.4) ;
}
label.select-label .glyphicon {
  font-size: 0.9em;
  text-align: right;
  margin-right:20px;
}
ul {
  list-style-type: none;
}
li {
  padding: 0.7em 2.5em;
  letter-spacing: 1px;
  text-align: left;
  margin: 0 auto;
  color: #f2f2f2;
  font-size: 1.3em;
  cursor: pointer;
}
li:hover {
	color: #4974A7;
}

li:nth-child(1){
	background : #40C8C4 ;
	color: #fff;
	box-shadow: 0 0px 20px 0 rgba(25, 42, 119, 0.4) ;
}
		
li:nth-child(2) {
  margin-left: 100px;
  opacity: 0.9;
}

li:nth-child(3) {
  margin-left: 200px;
  opacity: 0.7;
}
li:nth-child(4) {
  margin-left: 300px;
  opacity: 0.5;
}
li:nth-child(5) {
  margin-left: 400px;
  opacity: 0.3;
}
li:nth-child(6) {
  margin-left: 500px;
  opacity: 0.1;
}

.move-left {
  margin-left: 0px !important;
  opacity: 1 !important;
}

.dummy-content {
  width: 105%;
  top: 58px;
  left: -11px;
  position: absolute;
  color: black;
}
.dummy-title {
  padding: 0.7em 3.3em;
  letter-spacing: 1px;
  position: absolute;
  text-align: left;
  color: #2f2f2f;
  font-size: 1.2em;
  cursor: pointer;
  background: #f9f9f9;
  display: none;
}
.dummy-title:nth-child(2) {
  margin-top: calc(52.78px);
}
.dummy-title:nth-child(3) {
  margin-top: calc(52.78px * 2);
}
.dummy-title:nth-child(4) {
  margin-top: calc(52.78px * 3);
}
.dummy-title span {
  width: 192px;
  display: inline-block;
}
.dummy-title i {
  font-weight: 100;
  top: 3px;
}
.move-top {
  margin-top: -58.78px !important;
}

.fadeout {
  opacity: 0;
}
.dummy {
  background: #415c71;
  width: 95.2%;
  margin: 0 11px;
  min-height: 492px;
  display: block;
  position: absolute;
  height: 100%;
  text-align: center;
  padding-top: 48px;
  margin-top: 140%;
}
.dummy span {
  display: inline-block;
  width: 70%;
  height: 20px;
  margin: 10px auto;
  border-radius: 4px;
  background: #4e7a9c;
}
.dummy span:nth-child(1) {
  width: 30%;
}

		
$(document).ready(function() {
	
  $("#menu").click(function() {
    $("#cube").css("transform", "translateZ(-160px) rotateY(-90deg) ");
    $("li").addClass("move-left");
  });

  $("#close").click(function() {
    $("#cube").css("transform", "translateZ(-160px) rotateY(0deg)");
    $("li").removeClass("move-left");
  });

  $(".dum-close").click(function() {
    $("#cube").css("transform", "translateZ(-160px) rotateY(0deg)");
    $("li").removeClass("move-left");
	  var temp = $(this).closest(".dummy-title");
	    setTimeout(function() {
			temp.removeClass("move-top");
			temp.css("display", "none");
			$("ul").removeClass("fadeout");
			$(".dummy").css("margin-top", "140%")
		},500);
  });

  $("ul .cs-selected").click(function() {
    $("ul").addClass("fadeout");
    var att = $(this).attr("data-value");
    $(".dummy-title[data-link='" + att + "']").css("display", "block");
    setTimeout(function() {
      $(".dummy-title[data-link='" + att + "']").addClass("move-top");
      $(".dummy").css("margin-top", "-3%");
    }, 400);
  });
});