CSS transform-origin всегда (0,0) в SVG

Question

Я бы хотел, чтобы каждый полигон / группа отображался с анимацией.Я хочу, чтобы это было вращение по оси Y, а начало вращения - это ось Y самой левой вершины (представьте, что игральная карта раскрывается после того, как левый край находится напротив стола, от перпендикуляра к плоскости).

Однако, согласно этой скрипке , источником преобразования всегда является ось Y, но всегда с x = 0 в качестве источника вращения, хотя я использую крайнюю левую вершину в качестве преобразования.origin.

БОНУС: После начального вращения я хотел бы подождать 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>, обычно должно работать.

Однако применение их к элементам внутри <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>