SVG 上的 CSS transform-origin 总是 (0,0)

Question

我想让每个多边形/组以动画形式出现。我希望它是 Y 轴上的旋转，旋转的原点是最左边顶点的 Y 轴(想象一张扑克牌在左边缘靠在 table 上，从垂直到平坦后被揭开)。

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

奖励:初始旋转后，我想等待 1 秒，然后以最右边顶点的 Y 轴为原点进行另一次旋转以使其消失(0 到 -90 度)。

.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

应用于最外层的 3D 变换 <svg>元素通常应该可以工作。

但是将它们应用于 <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>