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

Question

我有一个包含三个polygons的svg，我试图在3d空间中水平旋转它们，基本上我试图创建一个旋转的动画，但由于某些原因它不起作用。正如你在下面的代码中看到的，我的3 polygons包含类cls-1，cls-2和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>

​

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>

​