我有一个像立方体的图形,但有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):选中=〉隐藏其他立方体侧面
1条答案
按热度按时间szqfcxe21#
如果我没理解错你的问题,添加下面的CSS应该可以满足你的要求:
请让我知道这是否有效,如果没有。