Question

我想使每个多边形/组都带有动画。我希望它是在Y轴上的旋转，旋转的原点是最左边顶点的Y轴（想象一张纸牌在左边缘靠在桌子上后从垂直到平坦的方向露出）。

但是，根据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

应用于最外面的<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>

SVG上的CSS转换原点始终（0,0）

1 个答案: