如何制作看起来正确的3D 2面旋转立方体状效果？

Question

我目前成功地制作了接近我想要的东西-click here，但它看起来仍然如此残缺且不切实际。我想使其像导航栏一样，您可以在其中看到徽标，然后将其悬停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上找到了THIS，并对其进行了一些修改，看看它是否可以在您的代码中应用

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>