Html 当单选按钮移动到另一个div时，Transform停止响应_Html_Css_Web_Sass

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

html css web sass

Html 当单选按钮移动到另一个div时，Transform停止响应,html,css,web,sass,Html,Css,Web,Sass,我有一堆单选按钮控制3D立方体的旋转。每个单选按钮负责从其一侧显示立方体。当单选按钮包含在body中而不是div中时，它就像一个符咒。但是，只要我将它们移动到div元素，我的立方体就不会再旋转了下面是单选按钮的HTML： <body> <input type="radio" checked id="radio-front" name="select-face"/> <input type="radio" id="radio-back" name="sele

我有一堆单选按钮控制3D立方体的旋转。每个单选按钮负责从其一侧显示立方体。当单选按钮包含在body中而不是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>

现在，我把单选按钮放在一个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>

我原以为它会起作用，但事实并非如此。你能告诉我我做错了什么吗？我愿意学习，所以如果我的问题太糟糕，如果你能给我指出一些我可以用来理解我的错误的来源，我将不胜感激

提前感谢。

您使用的是同级选择器，为了使其正常工作，它们必须是良好的同级，因此，第1节必须与您的收音机前部位于同一容器中，请注意name@PatsyIssa非常感谢你，在你的帮助下我解决了它！

<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>

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