I have a shape resembling a cube with 4 faces, all of which are currently visible. However, I would like to hide the other 3 faces when one face is showing.
For example: I attempted setting the opacity of the other cube sides to 0 when the first radio button is selected, but encountered difficulty in reverting the opacity back to 1 for the other sides when a different radio button is clicked.
I have tried implementing this in CSS, but it did not yield the expected results. Here is the code snippet:
.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);
}
// Rest of the CSS code omitted for brevity
<div class="cube-container">
<input class="radio-button" type="radio" name="cube-gallery" checked/>
// More input elements removed for simplicity
</div>Desired outcome: when .radio-button:nth-child(1):checked => hide the other cube sides