<div class="container">
  <div class="item A" id="A">
    <a href="#A" class="item-link">
      item A
    </a>
    <div>Contents of A</div>    
  </div>
  
  <div class="item B" id="B">
    <a href="#B" class="item-link">
      item B
    </a>
    <div>Contents of B</div>
  </div>
  
  <div class="item C" id="C">
    <a href="#C" class="item-link">
      item C
    </a>
    <div>Contents of C</div>
  </div>
  
  <div class="item D" id="D">
    <a href="#D" class="item-link">
      item D
    </a>
    <div>Contents of D</div>
  </div>
  
  <div class="item E" id="E">
    <a href="#E" class="item-link">
      item E
    </a>
    <div>Contents of E</div>
  </div>
</div>

<div class="info">
  Press and hold any item!
</div>

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800');

body {
  overflow: hidden;
  position: relative;
  font-family: "Open Sans";
}

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  height: 100vh;
  
  font-size: 32px;
  font-weight: 800;
  
  perspective: 600px;
  transform: skew(-20deg);
  transition: all .3s ease-in-out;
  
  cursor: pointer;
  position: relative;
}

.item {
  width: 100%;
  height: 100vh;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background: currentColor;
  transition: opacity .3s ease-in-out 0.3s, transform .3s ease-in-out, width .3s ease-in-out .3s;
}

.item .item-link {
  text-decoration: none;
  transform: skew(20deg);
  transition: all .3s ease-in .3s;
  color: white;
}

.item div {
  color: white;
  position: absolute;
  top: 0;
  left: 0;
  padding: 1em;
  opacity: 0;
  transition: all .3s ease-in 0s;
}

.item:last-child::after {
  content: '';
  width: 100vw;
  background: currentColor;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  transform: translateX(99%);
}

.item:first-child::before {
  content: '';
  width: 100vw;
  background: currentColor;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-99%);
}

.A {
  color: #1abc9c;
  
}

.B {
  color: #f1c40f;
}

.C {
  color: #e74c3c;
}

.D {
  color: #3498db;
}

.E {
  color: #e67e22;
}

.container:active {
  transform: skew(0);
}

.container:active .item-link {
  transform: skew(0);
  transition-delay: 0s;
}

.item:active .item-link {
  opacity: 0;
}

.item:active div {
  opacity: 1;
  transition-delay: 0.6s;
}

.container:active > .item:not(:active) {
  width: 2%;
}

.container:active > .item:not(:active) > .item-link, 
.container:active > .item:not(:active) div {
  opacity: 0;
}

.info {
  position: absolute;
  right: 0;
  bottom: 0;
  color: white;
  padding: 1em;
  margin: 1em;
  background: rgba(0,0,0,0.5)
}

// No JS!!! :D