CSS 在 SVG 上变换原点总是 (0,0)

Question

我想让每个 polygon/group 都显示一个动画。我希望它是 Y 轴上的旋转，旋转的原点是最左边顶点的 Y 轴（想象一张纸牌在左边缘与 table 相对后从垂直到平坦).

然而，根据 this Fiddle，变换的原点始终是 Y 轴，但始终以 x = 0 作为旋转的原点，即使我使用最左边的顶点作为变换原点。

奖励：初始旋转后，我想等待 1 秒，然后再旋转一次使其消失（0 到 -90 度），以最右边顶点的 Y 轴为原点。

.three {
    animation: spin 1s linear;
}

#three {
    transform-origin: 87px 153px;
    /*transform-origin: top left;*/
}

@keyframes spin {
    0% { 
        transform: rotateY(-90deg); 
    }  
    100% { 
        transform: rotateY(0deg); 
    } 
}

<svg width="1920" height="1080" xmlns="http://www.w3.org/2000/svg">
    <g class='three' fill="gray" stroke="black" stroke-width="1">
        <polygon id="three"  points="222,0 200,107 87,153" />
    </g>
</svg>

Answer 1

应用于最外层 <svg> 元素的 3D 变换通常应该有效。

但是将它们应用于 <svg> 中的元素仍然有点不确定。

幸运的是，在这种情况下，您可以在不使用 3D 旋转的情况下重现您想要的内容。我们使用比例而不是旋转。我们使用一个缓动函数来模拟旋转中会发生什么。

#three {
    transform-origin: 87px 153px;
    animation: spin 1s linear;
    animation-timing-function: cubic-bezier(0.000, 0.550, 0.450, 1.000);
}

@keyframes spin {
    0% { 
        transform: scale(0, 1); 
    }  
    100% { 
        transform: scale(1, 1); 
    } 
}

<svg width="1920" height="1080" xmlns="http://www.w3.org/2000/svg">
    <g class='three' fill="gray" stroke="black" stroke-width="1">
        <polygon id="three"  points="222,0 200,107 87,153" />
    </g>
</svg>

CSS 在 SVG 上变换原点总是 (0,0)

CSS transform-origin always (0,0) on SVG

css

animation

svg

transformation

css-transforms