I'm struggling with creating a spinning animation using a `svg` that contains three `polygons`. I want to rotate each of them horizontally in 3D space, but the animation appears flat. Below is the code snippet showcasing the three polygons with classes `cls-1`, `cls-2`, and `cls-3`:
.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>