Bonjour,
Je souhaite réaliser une animation qui illustre l'ouverture d'un portail en SVG. Mais je me suis confronté à un problème et après plusieurs heures de recherche je n'ai pas trouvé de solution qui me convienne.
Je m'explique, mon portail en SVG est décomposé en 3 groupes (les 2 battants + les poteaux), j'arrive à faire tourner sur leurs axes les 2 battants mais je n'arrive pas a conserver la perspective (donc l'effet est pas top...).
Par contre, si je fait pivoter l'ensemble du SVG la perspective est bien conservé (mais se n'est pas vraiment se que je souhaite
). J'aimerais qu'ils pivotent ET qu'il y est un effet de perspective.
Le code simplifié pour illustrer mes propos (ici il s'agit simplement d'un mur + 1 porte) :
HTML
CSS
Je pourrais faire 3 SVG différents pour que ça marche correctement (ou mettre le fichier img) mais j'aimerais pouvoir conserver le portail en une seule parties.
Du coup, j'aimerais savoir où déclarer la perspective pour qu'elle soit prise en compte à l'intérieur du code SVG, si cela est possible.
Merci d'avance
Toine
Modifié par Bachi-Bouzouk (28 Feb 2017 - 17:23)
Je souhaite réaliser une animation qui illustre l'ouverture d'un portail en SVG. Mais je me suis confronté à un problème et après plusieurs heures de recherche je n'ai pas trouvé de solution qui me convienne.
Je m'explique, mon portail en SVG est décomposé en 3 groupes (les 2 battants + les poteaux), j'arrive à faire tourner sur leurs axes les 2 battants mais je n'arrive pas a conserver la perspective (donc l'effet est pas top...).
Par contre, si je fait pivoter l'ensemble du SVG la perspective est bien conservé (mais se n'est pas vraiment se que je souhaite
). J'aimerais qu'ils pivotent ET qu'il y est un effet de perspective.Le code simplifié pour illustrer mes propos (ici il s'agit simplement d'un mur + 1 porte) :
HTML
<!DOCTYPE html>
<link rel="stylesheet" href="test-perspective.css"/>
</head>
<body>
<section id="perspective">
<svg id="tout" xmlns="http://www.w3.org/2000/svg" width="210mm" height="297mm" viewBox="0 0 744.1 1052.4"><path id="base" d="M60 269.5h608.6v463H60v-463z" fill="gray"/><path id="porte" d="M248.3 449.5h257v283h-257v-283z" fill="red"/></svg>
</section>
</body></html>
CSS
#perspective{
perspective: 1250px;
}
#porte{
animation:ouvreToi 4s ease-in-out ;
transform-style: preserve-3d;
transform-origin: 0% 0%;
}
@-webkit-keyframes ouvreToi{
0% {transform: rotateY(0deg);}
100%{ -webkit-transform:rotateY(90deg);}
}
Je pourrais faire 3 SVG différents pour que ça marche correctement (ou mettre le fichier img) mais j'aimerais pouvoir conserver le portail en une seule parties.
Du coup, j'aimerais savoir où déclarer la perspective pour qu'elle soit prise en compte à l'intérieur du code SVG, si cela est possible.
Merci d'avance
Toine
Modifié par Bachi-Bouzouk (28 Feb 2017 - 17:23)