旋转三维立方体的正确css组合符

我想在一个立方体悬停在红色div上时旋转立方体。我找不到css组合器来实现这一点。我认为要旋转

#cube

，我需要使用相邻的同级选择器（+），但它不起作用

#容器{
位置：相对位置；
顶部：100px；
左：100px；
透视图：1000px；
透视原点：100px 100px；
}
#立方体{
位置：绝对位置；
宽度：200px；
高度：200px；
变换样式：保留-3d；
转变：转变2s；
变换原点：50%50%；
}
#立方体div{
边框：2件纯黑；
位置：绝对位置；
边界半径：50px；
宽度：200px；
高度：200px；
}
#正面{
变换：旋转（0度）平移（100像素）；
背景色：rgba（0,34,62,0.3）；
}
#对{
变换：旋转（90度）平移（100像素）；
背景色：rgba（110,34162,0.3）；
}
#背{
变换：旋转（180度）平移（100像素）；
背景色：rgba（20,4,62,0.3）；
}
#左{
变换：旋转（-90度）平移Z（100像素）；
背景色：rgba（80134,2,0.3）；
}
#顶{
变换：旋转（90度）平移（100像素）；
背景色：rgba（80234200,0.3）；
}
#底部{
变换：rotateX（-90度）translateZ（100像素）；
背景色：rgba（180234,2,0.3）；
}
#水平的{
位置：绝对位置；
顶部：300px；
高度：50px；
宽度：100px；
背景色：红色；
}
#水平：悬停+立方体{
变换：旋转（360度）；
}

1.
2.
3.
4.
5.
6.

是的，他们是兄弟姐妹，但CSS规则只能继续。只要改变DOM中的水平位置，它就会工作

#容器{
位置：相对位置；
顶部：100px；
左：100px；
透视图：1000px；
透视原点：100px 100px；
}
#立方体{
位置：绝对位置；
宽度：200px；
高度：200px；
变换样式：保留-3d；
转变：转变2s；
变换原点：50%50%；
}
#立方体div{
边框：2件纯黑；
位置：绝对位置；
边界半径：50px；
宽度：200px；
高度：200px；
}
#正面{
变换：旋转（0度）平移（100像素）；
背景色：rgba（0,34,62,0.3）；
}
#对{
变换：旋转（90度）平移（100像素）；
背景色：rgba（110,34162,0.3）；
}
#背{
变换：旋转（180度）平移（100像素）；
背景色：rgba（20,4,62,0.3）；
}
#左{
变换：旋转（-90度）平移Z（100像素）；
背景色：rgba（80134,2,0.3）；
}
#顶{
变换：旋转（90度）平移（100像素）；
背景色：rgba（80234200,0.3）；
}
#底部{
变换：rotateX（-90度）translateZ（100像素）；
背景色：rgba（180234,2,0.3）；
}
#水平{
位置：绝对位置；
顶部：300px；
高度：50px；
宽度：100px；
背景色：红色；
}
#水平：悬停+立方体{
变换：旋转（360度）；
}

1.
2.
3.
4.
5.
6.

这在CSS3中是不可能的。我可以用JQuery来做吗？这是可能的哦！。。。。。。。你能不能给我一个CSS的替代方案……并告诉我“立方体”不是“水平”的兄弟姐妹？