<div class="cube">
  <div class="side home">
    <ul>
      <li></li>
      <li></li>
      <li class="home round">
        <i class="fas fa-home fa-2x"></i>
      </li>
      <li class="user"><i class="fas fa-user fa-2x"></i></li>
      <li class="social"><i class="fas fa-comments fa-2x"></i></li>
      <li class="shop"><i class="fas fa-dollar-sign fa-2x"></i></li>
      <li class="music"><i class="fas fa-music fa-2x"></i></li>
      <li></li>
      <li></li>
    </ul>
  </div>
  <div class="side user">
    <ul>
      <li><i class="fas fa-chevron-left fa-2x"></i></li>
      <li><span>User</span></li>
      <li class="user round"><i class="fas fa-user fa-2x"></i></li>
      <li class="user"><i class="fas fa-book fa-2x"></i></li>
      <li class="user"><i class="fas fa-user-friends fa-2x"></i></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
  <div class="side social">
    <ul>
      <li><i class="fas fa-chevron-left fa-2x"></i></li>
      <li><span>Social</span></li>
      <li class="social"><i class="fab fa-twitter fa-2x"></i></li>
      <li class="social"><i class="fab fa-instagram fa-2x"></i></li>
      <li class="social"><i class="fab fa-facebook fa-2x"></i></li>
      <li class="social"><i class="fab fa-weixin fa-2x"></i></li>
      <li class="social"><i class="fab fa-weibo fa-2x"></i></li>
      <li class="social"><i class="fab fa-qq fa-2x"></i></li>
      <li class="social"><i class="fab fa-github fa-2x"></i></li>
    </ul>
  </div>
  <div class="side shop">
    <ul>
      <li><i class="fas fa-chevron-left fa-2x"></i></li>
      <li><span>Shop</span></li>
      <li class="shop round"><i class="fas fa-dollar-sign fa-2x"></i></li>
      <li class="shop"><i class="fas fa-fighter-jet fa-2x"></i></li>
      <li class="shop"><i class="fas fa-rocket fa-2x"></i></li>
      <li class="shop"><i class="fas fa-gift fa-2x"></i></li>
      <li class="shop"><i class="fas fa-beer fa-2x"></i></li>
      <li class="shop"><i class="fas fa-mobile fa-2x"></i></li>
      <li class="shop"><i class="fas fa-female fa-2x"></i></li>
    </ul>
  </div>
  <div class="side music">
    <ul>
      <li><i class="fas fa-chevron-left fa-2x"></i></li>
      <li><span>Music</span></li>
      <li></li>
      <li></li>
      <li></li>
      <li class="music"><i class="fas fa-th fa-2x"></i></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>

  <div class="side face6">
  </div>
</div>

body {
  background: radial-gradient(black 3px, transparent 4px),
    radial-gradient(black 3px, transparent 4px),
    linear-gradient(#fff 4px, transparent 0),
    linear-gradient(
      45deg,
      transparent 74px,
      transparent 75px,
      #a4a4a4 75px,
      #a4a4a4 76px,
      transparent 77px,
      transparent 109px
    ),
    linear-gradient(
      -45deg,
      transparent 75px,
      transparent 76px,
      #a4a4a4 76px,
      #a4a4a4 77px,
      transparent 78px,
      transparent 109px
    ),
    #fff;
  background-size: 109px 109px, 109px 109px, 100% 6px, 109px 109px, 109px 109px;
  background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.cube {
  position: relative;
  width: 240px;
  height: 240px;
  margin: 100px auto;
  transform-style: preserve-3d;
  transform: rotateX(-20deg) rotateY(-20deg);
  transition: transform 1.5s;
}

.side {
  position: absolute;
  left: 0;
  height: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #eee;
  box-sizing: border-box;
  border-radius: 3px;
  box-shadow: 0 0 3px #2c2c2c;
  background-color: #2c2c2c;
}

.side li {
  float: left;
  width: 50px;
  height: 50px;
  margin-left: 22.5px;
  margin-top: 22.5px;
  color: #fff;
  text-align: center;
  text-shadow: 0 0 2px #ffff2f;
  box-sizing: border-box;
}

.side li.round {
  position: relative;
}

.side li.round::before {
  display: block;
  content: "";
  width: 35px;
  height: 35px;
  margin-top: 0px;
  margin-left: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
}
.side li.round i {
  position: absolute;
  top: 8.5px;
  left: 13.5px;
  width: 28px;
  height: 28px;
  font-size: 18px;
  text-shadow: 0 0 1px #fff;
  color: rgba(255, 255, 255, 0.3);
}

.side.home {
  transform: translateZ(120px);
}
.side.music {
  transform: rotateY(180deg) translateZ(120px);
}
.side.user {
  transform: rotateY(-90deg) translateZ(120px);
}
.side.social {
  transform: rotateX(90deg) translateZ(120px);
}
.side.shop {
  transform: rotateY(90deg) translateZ(120px);
}
.side.face6 {
  transform: rotateX(90deg) translateZ(-120px);
}

.cube.home {
  transform: translateZ(-120px);
}
.cube.music {
  transform: rotateY(180deg);
}
.cube.user {
  transform: translateZ(-120px) rotateY(90deg);
}
.cube.social {
  transform: translateZ(-120px) rotateX(-90deg);
}
.cube.shop {
  transform: translateZ(-120px) rotateY(-90deg);
}
.cube.face6 {
  transform: translateZ(120px) rotateX(-90deg);
}

$(".side").on("click", "li", function () {
  $(".cube")
    .removeClass()
    .addClass("cube " + ($(this).attr("class") || ""));
});