Question

我有一堆控制3D立方体旋转的单选按钮。每个单选按钮负责从其一侧显示立方体。当单选按钮包含在主体中而不包含在div中时，它就像魅力一样。但是，只要我将它们移动到div元素，我的立方体就不会再旋转了。

所以，这是单选按钮的HTML：

<body>
<input type="radio" checked id="radio-front" name="select-face"/>    
<input type="radio" id="radio-back" name="select-face"/>
<input type="radio" id="radio-left" name="select-face"/>
<input type="radio" id="radio-right" name="select-face"/>
</body>

CSS如下所示，效果很好：

#radio-back:checked ~ .section1 .scene .cube {
  transform: rotateY(180deg); 
} 
#radio-left:checked ~ .section1 .scene .cube {
  transform: rotateY(90deg); 
} 
#radio-right:checked ~ .section1 .scene .cube {
  transform: rotateY(-90deg);   
}

现在，我将单选按钮放在div中，看起来像这样（此时它停止旋转）：

<body>
<div id="radioButtons">    
<input type="radio" checked id="radio-front" name="select-face"/>  
<input type="radio" id="radio-back" name="select-face"/>
<input type="radio" id="radio-left" name="select-face"/>
<input type="radio" id="radio-right" name="select-face"/>
</div>
</body>

因此，我改变了CSS：

#radioButtons #radio-back:checked ~ .section1 .scene .cube {
  transform: rotateY(180deg); 
} 
#radioButtons #radio-left:checked ~ .section1 .scene .cube {
  transform: rotateY(90deg); 
} 
#radioButtons #radio-right:checked ~ .section1 .scene .cube {
  transform: rotateY(-90deg);   
}

我预计它应该有用，但它没有。你能告诉我我做错了什么吗？我愿意学习，所以万一我的问题太糟糕了，如果你指出一些我可以用来理解我的错误的来源，我会很感激。

提前谢谢。

当单选按钮移动到另一个div时，转换停止响应

0 个答案: