Html CSS多维数据集中的RotateX工作不正常

我正在学习创建立方体旋转效果。悬停时，如果我将

rotateX

替换为

rotateY

，立方体将围绕Y轴旋转。但当存在旋转X时，立方体不会绕X轴旋转。如何实现立方体的正确旋转

#容器{
透视图：1000px；
透视原点：0；
}
#立方体{
位置：相对位置；
顶部：100px；
左：100px；
宽度：200px；
变换样式：保留-3d；
转变：转变2s；
变换原点：50%50%；
}
#立方体div{
位置：绝对位置；
宽度：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像素）；
}
#底部{
变换：rotateX（-90度）translateZ（100像素）；
}
#立方体：悬停{
变换：旋转（360度）；
}

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

如果我理解正确，您只需将

立方体的高度设置为
200px


#容器{
透视图：1000px；
透视原点：0；
}
#立方体{
位置：相对位置；
顶部：100px；
左：100px；
宽度：200px；
高度：200px；
变换样式：保留-3d；
转变：转变2s；
变换原点：50%50%；
}
#立方体div{
位置：绝对位置；
宽度：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像素）；
}
#底部{
变换：rotateX（-90度）translateZ（100像素）；
}
#立方体：悬停{
变换：旋转（360度）；
}

1.
2.
3.
4.
5.
6.
您需要根据div大小（cude的一侧）设置变换原点。所以我只是改变了
转换原点：100px 100px对于类似以下内容的多维数据集：


#容器{
透视图：1000px；
透视原点：0；
高度：500px；
}
#立方体{
位置：相对位置；
顶部：100px；
左：100px；
宽度：200px；
变换样式：保留-3d；
转变：转变2s；
变换原点：100px 100px；
}
#立方体div{
位置：绝对位置；
宽度：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像素）；
}
#底部{
变换：rotateX（-90度）translateZ（100像素）；
}
#立方体：悬停{
变换：旋转（360度）；
}

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