如何通过单选按钮选中状态控制四面立方体的面可见性

嘿，我懂你遇到的麻烦了——用单选按钮切换立方体面的时候，之前设为透明的面没法在切回来的时候恢复显示，对吧？这其实是CSS选择器的局限性导致的：当你用第一个单选按钮选中时隐藏其他面，后续的单选按钮没法覆盖这个样式，因为它们的选择器权重相同，而且没法反向影响前面的元素。

咱们换个思路解决：让每个单选按钮选中时，只保留对应立方体面可见，其余所有面直接隐藏。这样不管切换到哪个选项，当前对应面都会显示，其他面自动隐藏，就不会出现“没法恢复”的问题了。

下面是修改后的完整代码，我标了关键的改动点：

<div class="cube-container">
  <input class="radio-button" type="radio" name="cube-gallery" checked/>
  <input class="radio-button" type="radio" name="cube-gallery" />
  <input class="radio-button" type="radio" name="cube-gallery" />
  <input class="radio-button" type="radio" name="cube-gallery" />
  <div class="cube">
    <div class="cube-side"><h1>Side 1</h1></div>
    <div class="cube-side"><h1>Side 2</h1></div>
    <div class="cube-side"><h1>Side 3</h1></div>
    <div class="cube-side"><h1>Side 4</h1></div>
  </div>
</div>

.cube-container {
  width: 22.5em;
  height: 28em;
  text-align: center;
  perspective: 45em;
  margin: auto;
  text-align: center;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition-duration: 2s;
  transform: rotateX(-15deg) rotateY(20deg);
}

.cube-side {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(8.1px);
  -webkit-backdrop-filter: blur(8.1px);
  border: 1px solid rgba(255, 255, 255, 0.03);
  opacity: 1;
  transition: opacity 0.5s ease; /* 给透明度加过渡，切换更平滑 */
}

.cube-side:nth-child(1) {
  transform: rotateY(0deg) translateZ(11.25em);
}

.cube-side:nth-child(2) {
  transform: rotateY(90deg) translateZ(11.25em);
}

.cube-side:nth-child(3) {
  transform: rotateY(180deg) translateZ(11.25em);
}

.cube-side:nth-child(4) {
  transform: rotateY(-90deg) translateZ(11.25em);
}

.radio-button {
  margin-bottom: 5em;
}

.radio-button:checked~.cube {
  transition-duration: 3s;
  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

/* 保留原有的立方体旋转逻辑 */
.radio-button:nth-child(1):checked~.cube {
  transform: rotateY(0deg);
}

.radio-button:nth-child(2):checked~.cube {
  transform: rotateY(-90deg);
}

.radio-button:nth-child(3):checked~.cube {
  transform: rotateY(-180deg);
}

.radio-button:nth-child(4):checked~.cube {
  transform: rotateY(-270deg);
}

/* 核心修改：每个单选按钮选中时，仅显示对应面，其余隐藏 */
.radio-button:nth-child(1):checked~.cube .cube-side:not(:nth-child(1)) {
  opacity: 0;
}

.radio-button:nth-child(2):checked~.cube .cube-side:not(:nth-child(2)) {
  opacity: 0;
}

.radio-button:nth-child(3):checked~.cube .cube-side:not(:nth-child(3)) {
  opacity: 0;
}

.radio-button:nth-child(4):checked~.cube .cube-side:not(:nth-child(4)) {
  opacity: 0;
}

关键说明： #

1. 给.cube-side加了opacity过渡，让隐藏/显示的切换更丝滑，不会生硬跳变。
2. 核心用了:not()选择器：当第N个单选按钮选中时，立方体里除了第N个面之外的所有面都设为透明，确保当前选中的面一定可见，其他面自动隐藏。
3. 这种逻辑不会有“没法恢复”的问题，因为每次切换单选按钮时，都会重新覆盖所有面的可见性规则，完全替代之前的样式。

如果你想让隐藏的面彻底不占交互空间，可以把opacity:0换成visibility:hidden，不过opacity的过渡效果会更流畅，你可以根据需求选~

备注：内容来源于stack exchange，提问作者jujy7