Html 如何使用css在三维空间中旋转svg

我有一个

svg

，它包含三个

polygons

，我试图在三维空间中水平旋转它们，基本上我试图创建一个旋转动画，但由于某种原因它不起作用。 正如您在下面的代码中所看到的，我有

3个多边形

，类为

cls-1

cls-2

和

cls-3

，当我尝试旋转它们时，动画看起来是平面的，代码如下

.svg支架{
高度：400px；
宽度：800px；
透视图：1000px；
}
.svg支架svg{
变换样式：保留-3d；
}
.cls-1{
变换样式：保留-3d；
动画名称：旋转；
动画持续时间：4s；
动画计时功能：线性；
动画迭代次数：无限；
}
@关键帧旋转{
从{
变换：旋转（0度）；
}
到{
变换：旋转（180度）；
}
}

.cls-1{
填充：#2743b7；
}
.cls-2{
填充：#42b6d1；
}
.cls-3{
填充：#17c648；
}

添加

变换原点：中心

至

.cls-1、.cls-2、.cls-3

给出了绕垂直轴旋转的效果：

.svg支架{
高度：400px；
宽度：800px；
透视图：1000px；
}
.svg支架svg{
变换样式：保留-3d；
}
.cls-1、.cls-2、.cls-3{
变换样式：保留-3d；
变换原点：中心；
动画名称：旋转；
动画持续时间：4s；
动画计时功能：线性；
动画迭代次数：无限；
}
@关键帧旋转{
从{
变换：旋转（0度）；
}
到{
变换：旋转（360度）；
}
}

.cls-1{
填充：#2743b7；
}
.cls-2{
填充：#42b6d1；
}
.cls-3{
填充：#17c648；
}

这似乎有效！但是你能帮我再解决一个问题吗？我尝试过在不同方向旋转它们，为其中一个方向提供

rotateY（360度）

，为另一个方向提供

rotateY（-360度）

，但它们似乎都是在同一方向旋转，所以你能建议解决方案吗？