Partage
  • Partager sur Facebook
  • Partager sur Twitter

animation rotation image

rotation de 180 degré un image avec une animation

Sujet résolu
    17 juin 2022 à 22:23:38

    bonjour deja dsl pour les faute je voudrais faire en sorte qu une image tourne sur elle meme dans l axe de Z en fesent une rotation de 180 degré exemple en image 

    comme avec les flech je voudrais que avec du js on puisse faire que 1 rotation de 180 degré a une vitesse moyenne

    merci a vous 

    pour aider le code js ( on c est jamais) 

    var image = document.getElementById("image");
    image.addEventListener('click', function () {
    
    });

    merci a vous vous etes les best 

    • Partager sur Facebook
    • Partager sur Twitter
      18 juin 2022 à 0:35:10

      Bonjour tu as deux solutions pour faire ça simplement 

      1- tu prépares l'animation en css et tu l'affectes à une class

      exemple

      .rotate_anim

      {

      animation: rotate linear 1s; ici tu choisirais donc la vitesse en faisant varier le temps

      }

      donc tu crées l'animation de rotation 

      et au cliques il te suffirait d'ajouter cette class sur l'image en question puis de la retirer 

      2-

      tu utilises la methode animate de javascript pour faire la même chose cette fois ci tu n'aurais donc pas besoin d'une class ( je ne sais plus si les animations rotate marchent dessus mais à essayer sinon tu as toujours la solution 1)

      • Partager sur Facebook
      • Partager sur Twitter

      yasakani no magatama

        18 juin 2022 à 1:10:03

        zvheer a écrit:

        ................

        en fait je suis trop con 

        je suis parti faire un tour pour me changer les idee et j ai compris que j avais fait une simple faute 

        j ai oublier de metre 

        transition: 0.7s ease;

        pour faire l animation en 0.7 s je suis juste un brelle 

        au moins pour le coup si une personne est dans mon cas alors il se sentira bete aussi hahah 

        je passe le code 

        #labarum1 {
            width: 10%;
            margin-left: calc((185% - 40%) / 2);
            height: auto;
            position: fixed;
            transition: 0.7s ease;
        
        
        }
        
        
        
        #labarum1:hover {
            transform: rotateZ(180deg);
        
        }
        

        oui c est que en hover mais c est pour tester 


        • Partager sur Facebook
        • Partager sur Twitter
          18 juin 2022 à 17:18:30

          ils sont pas mal les graphismes, c'est pour un jeu?
          • Partager sur Facebook
          • Partager sur Twitter
            18 juin 2022 à 17:55:17

            Arthur222 a écrit:

            ils sont pas mal les graphismes, c'est pour un jeu?


            C'est vrai je le rejoins aussi j'aime bien l'apparence, si c'est un jeux js postes le lien une fois finis envie de voir ce que ça donne
            • Partager sur Facebook
            • Partager sur Twitter

            yasakani no magatama

              19 juin 2022 à 14:57:02

              Arthur222 a écrit:

              ils sont pas mal les graphismes, c'est pour un jeu?

              tu vas rire mais non c'est pour un cv Mdr je fais plein de thème different pour sorir du lot

              zvheer a écrit:

              Arthur222 a écrit:

              ils sont pas mal les graphismes, c'est pour un jeu?


              C'est vrai je le rejoins aussi j'aime bien l'apparence, si c'est un jeux js postes le lien une fois finis envie de voir ce que ça donne

              dsl dommage après je suis assé débutent dedans c'est vrai que je m'améliore mais c'est cool déjà 

              -
              Edité par WillemCornil 19 juin 2022 à 14:58:00

              • Partager sur Facebook
              • Partager sur Twitter
                19 juin 2022 à 16:15:17

                :/
                • Partager sur Facebook
                • Partager sur Twitter

                yasakani no magatama

                animation rotation image

                × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                • Editeur
                • Markdown