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

Question

我有一个svg，其中包含三个polygons，我正在尝试在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>