How To Rotate Svg In A 3d Space With Css

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

Solution 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);
    }
    
}

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