Как запустить анимацию SVG rotate3d под уже повернутым углом? - PullRequest
Новая
       30

Как запустить анимацию SVG rotate3d под уже повернутым углом?

0 голосов
/ 24 апреля 2019

Я пытаюсь сделать так, чтобы 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>
...