How to rotate svg in a 3d space with css

Question

I have a svg which contains three polygons and I'm trying to rotate each of them horizontally in 3d space, Basically I'm trying to create a spinning animation but it's not working for some reason. As you could see in the below code that I have 3 polygons with classes cls-1 cls-2 and cls-3 when I try to rotate them the animation looks flat, Here's the code.

.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

Adding transform-origin: center center; to .cls-1, .cls-2, .cls-3 gives the effect of spinning around the vertical axis:

.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>