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

Question

我目前成功地制作了一些接近我想要的东西 -单击此处，但它看起来仍然如此蹩脚和不切实际。我想让它像一个导航栏，您可以在其中看到徽标，并将其悬停在 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() {&nbsp; side = side == "front" ? "top" : "front";&nbsp; var showClass = 'show-' + side;&nbsp; if (currentClass) {&nbsp; &nbsp; cube.classList.remove(currentClass);&nbsp; }&nbsp; cube.classList.add(showClass);&nbsp; currentClass = showClass;}* {&nbsp; box-sizing: border-box;}body {&nbsp; font-family: sans-serif;}.scene {&nbsp; width: 200px;&nbsp; height: 200px;&nbsp; border: 1px solid #CCC;&nbsp; margin: 80px;&nbsp; perspective: 400px;}.cube {&nbsp; width: 200px;&nbsp; height: 200px;&nbsp; position: relative;&nbsp; transform-style: preserve-3d;&nbsp; transform: translateZ(-100px);&nbsp; transition: transform 1s;}.cube.show-front {&nbsp; transform: translateZ(-100px) rotateY( 0deg);}.cube.show-top {&nbsp; transform: translateZ(-100px) rotateX( -90deg);}.cube__face {&nbsp; position: absolute;&nbsp; width: 200px;&nbsp; height: 200px;&nbsp; border: 2px solid black;&nbsp; line-height: 200px;&nbsp; font-size: 40px;&nbsp; font-weight: bold;&nbsp; color: white;&nbsp; text-align: center;}.cube__face--front {&nbsp; background-color: red;}.cube__face--top {&nbsp; background-color: blue;}.cube__face--front {&nbsp; transform: rotateY( 0deg) translateZ(100px);}.cube__face--top {&nbsp; transform: rotateX( 90deg) translateZ(100px);}label {&nbsp; margin-right: 10px;}<div class="scene">&nbsp; <div class="cube"&nbsp; onmouseover="changeSide()">&nbsp; &nbsp; <div class="cube__face cube__face--front">front</div>&nbsp; &nbsp; <div class="cube__face cube__face--top">top</div>&nbsp; </div></div>