Question

我正在尝试使SVG像折叠椅一样展开，因此座椅必须以-95度出现并移至0度开始。目前，它从0度开始，动画会将其捕捉到-95度，然后逐步进入0度。

最终，我希望它在单击时展开，并在第二次单击时折回。现在将其设置为活动状态，因此我将鼠标向下按住以运行动画

* {
      box-sizing: border-box;
      margin: 0;
      padding: 10;
}
    
@keyframes transform {
    from {transform:perspective(800px) rotate3d(1,0,0,-95deg)}
    to {transform:perspective(800px) rotate3d(1,0,0, 0deg)}
}
    
#thing:active {
        animation: transform .8s steps(100) both;
        transform-origin: 0% 90%;
}

<html>
<head>
   <link href="seat2.css" rel="stylesheet" />
</head>

            <svg id="thing" xmlns="http://www.w3.org/2000/svg" width="75px" height="75px" viewBox="0 0 75 75"><rect width="50" height="50"/>
            </svg>
</html>

如何以已旋转的角度开始SVG rotation3d动画？

0 个答案: