如何制作外观正确的 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>

如何制作外观正确的 3D 2 面旋转立方体效果？

How to make a properly looking 3D 2-sided rotating cube-like effect?

html

css

3d

effect

navigationbar