Proper css combinators for rotating a 3-D cube
<p>I want to rotate the cube as one hovers over the red div. I am unable to find the css combinator to achieve this. I think to rotate <code>#cube</code>, i need to use adjacent sibling selector (+) but it is not working. </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#container {
 position: relative;
 top: 100px;
 left: 100px;
 perspective: 1000px;
 perspective-origin: 100px 100px;
}
#cube {
 position: absolute;
 width: 200px;
 height: 200px;
 transform-style: preserve-3d;
 transition: transform 2s;
 transform-origin: 50% 50%;
}
#cube div {
 border: 2px solid black;
 position: absolute; 
 border-radius: 50px;
 width: 200px;
 height: 200px;
}
#front {
 transform: rotateY(   0deg ) translateZ( 100px );
 background-color: rgba(0,34,62,0.3);
}
#right {
 transform: rotateY(  90deg ) translateZ( 100px );
    background-color: rgba(110,34,162,0.3);
}
#back {
 transform: rotateY( 180deg ) translateZ( 100px );
 background-color: rgba(20,4,62,0.3);
}
#left {
 transform: rotateY( -90deg ) translateZ( 100px );
 background-color: rgba(80,134,2,0.3);
}
#top {
 transform: rotateX(90deg) translateZ(100px);
 background-color: rgba(80,234,200,0.3);
}
#bottom {
 transform: rotateX(-90deg) translateZ(100px);
 background-color: rgba(180,234,2,0.3);
}
#horizontal {
 position: absolute;
 top: 300px;
 height: 50px;
 width: 100px;
 background-color: red;
}
#horizontal:hover + #cube{
 transform: rotateX(360deg);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
    &lt;head&gt;
     &lt;link rel="stylesheet" href="style.css"&gt;
 &lt;/head&gt;
    &lt;body&gt;
     &lt;div id="container"&gt;
      &lt;div id="cube"&gt;
          &lt;div id="front"&gt;&lt;h1&gt;1&lt;/h1&gt;&lt;/div&gt;
          &lt;div id="right"&gt;&lt;h1&gt;2&lt;/h1&gt;&lt;/div&gt;
          &lt;div id="back"&gt;&lt;h1&gt;3&lt;/h1&gt;&lt;/div&gt;
          &lt;div id="left"&gt;&lt;h1&gt;4&lt;/h1&gt;&lt;/div&gt;
          &lt;div id="top"&gt;&lt;h1&gt;5&lt;/h1&gt;&lt;/div&gt;
          &lt;div id="bottom"&gt;&lt;h1&gt;6&lt;/h1&gt;&lt;/div&gt;
      &lt;/div&gt;
   &lt;div id="horizontal"&gt;&lt;/div&gt;
   &lt;div id="vertical"&gt;&lt;/div&gt;
  &lt;/div&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>