How can I change visibility on radio button checked?-CodePudding

I have a figure like a cube but with 4 faces and all the faces are showing, but I want to hide the other 3 faces when one is showing

example : I've tried to set the opacity to 0 to other cube-sides when the first radio button is checked but then it doesn't work to set the opacity to 1 again for the other cube-sides when other radio button is checked

I've tried in css but doesn't work as I expected. code:

.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 >
  <input  type="radio" name="cube-gallery" checked/>
  <input  type="radio" name="cube-gallery" />
  <input  type="radio" name="cube-gallery" />
  <input  type="radio" name="cube-gallery" />
  <div >
    <div ><h1>Side 1</h1></div>
    <div ><h1>Side 2</h1></div>
    <div ><h1>Side 3</h1></div>
    <div ><h1>Side 4</h1></div>
  </div>
</div>

what I want: when .radio-button:nth-child(1):checked => hide the other cube-sides

CodePudding user response：

If I understand your question correctly, adding the following CSS should do what you are asking:

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

Please, let me know if this worked and if not.