如何使用 css 在 3D 空间中旋转 svg

Question

我有一个包含三个polygons的svg，我正在尝试在 3d 空间中水平旋转它们中的每一个，基本上我正在尝试创建一个旋转动画，但由于某种原因它不起作用。 正如您在下面的代码中看到的那样，我在cls-1cls-2类cls-33 polygons，当我尝试旋转它们时，动画看起来很平坦，这是代码。

.svg-holder {
height: 400px;
width: 800px;
perspective: 1000px;
}
.svg-holder svg {
transform-style: preserve-3d;
}
.cls-1 {
transform-style: preserve-3d;
animation-name: rotate;
animation-duration: 4s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes rotate {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(180deg);
}

}

<div class="svg-holder">
<svg viewBox="0 0 237 126">
<defs>
<style>
.cls-1 {
fill: #2743b7;
}
.cls-2 {
fill: #42b6d1;
}
.cls-3 {
fill: #17c648;
}
</style>
</defs>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<polygon class="cls-1" points="237 0 79 0 0 42 158 42 237 0" />
<polygon class="cls-2" points="237 42 79 42 0 84 158 84 237 42" />
<polygon class="cls-3" points="237 84 79 84 0 126 158 126 237 84" />
</g>
</g>
</svg>
</div>

Answer 1

将transform-origin: center center;添加到.cls-1, .cls-2, .cls-3会产生围绕垂直轴旋转的效果：

.svg-holder {
height: 400px;
width: 800px;
perspective: 1000px;
}
.svg-holder svg {
transform-style: preserve-3d;
}
.cls-1, .cls-2, .cls-3 {
transform-style: preserve-3d;
transform-origin: center center;
animation-name: rotate;
animation-duration: 4s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes rotate {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}

}

<div class="svg-holder">
<svg viewBox="0 0 237 126">
<defs>
<style>
.cls-1 {
fill: #2743b7;
}
.cls-2 {
fill: #42b6d1;
}
.cls-3 {
fill: #17c648;
}
</style>
</defs>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<polygon class="cls-1" points="237 0 79 0 0 42 158 42 237 0" />
<polygon class="cls-2" points="237 42 79 42 0 84 158 84 237 42" />
<polygon class="cls-3" points="237 84 79 84 0 126 158 126 237 84" />
</g>
</g>
</svg>
</div>