如何制作看起来正确的 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() {

  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>