css 如何更改选中单选按钮的可见性?

1aaf6o9v  于 2022-12-15  发布在  其他
关注(0)|答案(1)|浏览(130)

我有一个像立方体的图形,但有4个面,所有的面都显示,但我想隐藏其他3个面时,一个是显示

例:我试着在选中第一个单选按钮时将其他立方体的不透明度设置为0,但在选中其他单选按钮时将其他立方体的不透明度再次设置为1也不起作用
我试过在CSS,但不工作,因为我的预期.代码:

.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);
}

.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);
}
<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>

我想要的:当.单选按钮:第n个子项(1):选中=〉隐藏其他立方体侧面

szqfcxe2

szqfcxe21#

如果我没理解错你的问题,添加下面的CSS应该可以满足你的要求:

.radio-button:nth-child(1):not(:checked)~div.cube div.cube-side:nth-child(1) {
  visibility: hidden;
}

.radio-button:nth-child(2):not(:checked)~div.cube div.cube-side:nth-child(2) {
  visibility: hidden;
}

.radio-button:nth-child(3):not(:checked)~div.cube div.cube-side:nth-child(3) {
  visibility: hidden;
}

.radio-button:nth-child(4):not(:checked)~div.cube div.cube-side:nth-child(4) {
  visibility: hidden;
}

请让我知道这是否有效,如果没有。

相关问题