Как сделать правильно выглядящий трехмерный вращающийся кубоподобный эффект?

Question

Мне в настоящее время удалось сделать что-то близкое к тому, что я хочу - нажмите здесь , но это все еще выглядит таким дерьмовым и нереальным c. Я хочу сделать его похожим на панель навигации, где вы видите lo go, и при этом 3D вращается, а ссылки отображаются снизу. Это выглядит так плохо, я не знаю, что случилось. Вот мой код:

.navbar {
  position: fixed;
  width: 500px;
  height: 80px;
  background: red;
  text-align: center;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}


.navbar .logo_side {
  position: absolute;
  width: 100%;
  height: 100%;
  background: blue;
  box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.3);
  transform-origin: top;
  transition: 1s ease-in;
}

.navbar .logo_side img {
  height: 100%;
}

.navbar:hover > .logo_side {
  transform: rotateX(90deg);
  transition: 1s ease-out;
}

.navbar .links_side {
  position: absolute;
  width: 100%;
  height: 100%;
  background: orange;
  box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.3);
  transform: rotateX(90deg);
  transform-origin: bottom;
  transition: 1s ease-out;
}

.navbar .links_side a {
  
}

.navbar:hover > .links_side {
  transform: rotateX(0deg);
  transition: 1s ease-in;
}

<div class="navbar">
	<div class="logo_side">
		<h1 style="color: white;">MY LOGO</h1>
	</div>
	<div class="links_side">
		<a href="/" class="active">Home</a>
		<a href="limbook.php">About</a>
		<a href="contact_us.php">Contact Us</a>
	</div>
</div>

Например, в настоящее время он выглядит так, как показано на рисунке 1, и я надеялся получить его примерно так, как показано на рисунке 2:

Answer 1

Я нашел ЭТО на codpen и немного его изменил, взгляните на него и посмотрите, сможете ли вы применить его к своему коду

var cube = document.querySelector('.cube');
var currentClass = '';
var side = "front";

function changeSide() {
  side = side == "front" ? "top" : "front";
  var showClass = 'show-' + side;
  if (currentClass) {
    cube.classList.remove(currentClass);
  }
  cube.classList.add(showClass);
  currentClass = showClass;
}

* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

.scene {
  width: 200px;
  height: 200px;
  border: 1px solid #CCC;
  margin: 80px;
  perspective: 400px;
}

.cube {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-100px);
  transition: transform 1s;
}

.cube.show-front {
  transform: translateZ(-100px) rotateY( 0deg);
}

.cube.show-top {
  transform: translateZ(-100px) rotateX( -90deg);
}

.cube__face {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 2px solid black;
  line-height: 200px;
  font-size: 40px;
  font-weight: bold;
  color: white;
  text-align: center;
}

.cube__face--front {
  background-color: red;
}

.cube__face--top {
  background-color: blue;
}

.cube__face--front {
  transform: rotateY( 0deg) translateZ(100px);
}

.cube__face--top {
  transform: rotateX( 90deg) translateZ(100px);
}

label {
  margin-right: 10px;
}

<div class="scene">
  <div class="cube"  onmouseover="changeSide()">
    <div class="cube__face cube__face--front">front</div>
    <div class="cube__face cube__face--top">top</div>
  </div>
</div>