3d图像多维数据集的代码不起作用

Question

具体来说，透视和变换属性在下面提供的css代码中不起作用。此外，单选按钮可以工作，但它们不会链接到多维数据集的正确边。我无法发现问题。

 $size: 500px; // cube length
body {
  text-align: center;
  padding: 50px;
 } 
 .scene {
  display: inline-block;
  margin-top: 50px;
  width: 500px;
  height: 500px;

  -webkit-perspective: 600px;
 }
.cube3d {
display: inline-block;
  position: 500px;
  width: 500px;
  height: 500px;

 -webkit-transform-style: preserve-3d;
  -webkit-transition: transform 0.6s;
}
.cube-face {

  width: 500px;
  height: 500px;
  position: absolute;
  background: red;
  opacity: 0.8;
}
// faces
.cube-face-front {
  background: yellow;
  transform: translate3d(0, 0, $size/2);
}  
.cube-face-back {
  background: black;
  transform: rotateY(180deg) translate3d(0, 0, $size/2);
} 
.cube-face-left {
  background: green;
  transform: rotateY(-90deg) translate3d(0, 0, $size/2);
} 
.cube-face-right {
  background: magenta;
  transform: rotateY(90deg) translate3d(0, 0, $size/2);
} 
.cube-face-top {
  background: blue;
  transform: rotateX(90deg) translate3d(0, 0, $size/2);
} 
.cube-face-bottom {
  background: red;
  transform: rotateX(-90deg) translate3d(0, 0, $size/2);
}  
// controls 

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