Want to make creations as awesome as this one?

Transcript

FLIP -

FLIP

L'exemple

V 1.2 du 13/06/20

Extension proposée par Patrice Nadam

Réutilisez !

Fonctions permettant la transformation des images

Groupez chacun de ces objets à un élément Genially (image, forme, texte...)

Possibilité de les dupliquer autant de fois que nécessaire...Supprimer les Objets non utilisés (Ne pas les placer hors de la page)

(Supprimez les transformations non désirées)

Le Principe

Pour voir la page dans sa totalité, cliquez sur Réutiliser ce Genially

Groupez chacun de ces objets à un élément Genially (image, forme, texte...)

Possibilité de les dupliquer autant de fois que nécessaire...Supprimer les Objets non utilisés (Ne pas les placer hors de la page)

Fonctions permettant la transformation des images

(Supprimez les transformations non désirées)

ROTATION DE 90°

<div style="color:red">FONCTION flipX</div> <script> var x = document.querySelectorAll(".flipx"); for (var i=0;i< x.length;i++) { var objet=x[i].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode; if (objet.getAttribute("id")==null) { objet=x[i].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode; } if (objet.getAttribute("id").search("genially-animated") ==0) { objet.style.transform = "scaleX(-1)"; } } </script>

<div style="color:green">FONCTION flipY</div> <script> var x = document.querySelectorAll(".flipy"); for (var i=0;i< x.length;i++) { var objet=x[i].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode; if (objet.getAttribute("id")==null) { objet=x[i].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode; } if (objet.getAttribute("id").search("genially-animated") ==0) { objet.style.transform = "scaleY(-1)"; } } </script>

<div class="flipx" style="color:red;font-size:20px;">flipX</div> <script></script>

<div style="color:green;font-size:20px;" class="flipy">flipY</div> <script></script>

LE CODE