Animation rotation image verticale

Version imprimable

14/10/2019, 11h27
Histo

3 pièce(s) jointe(s)

Animation rotation image verticale

Bonjour à tous j'ai réalisé une animation qui permet à mon image d'effectuer une rotation verticale. J'ai donc crée un événement "mouse over" sur la classe de mon image et je lui est affecté un toggleclass qui modifie mon css. Je souhaiterais qu'au verso j'ai un descriptif , je ne sais pas comment m'y prendre . Si quelqu'un peut m’aiguiller ?

voici mon code :

mon HTML

Pièce jointe 509787

mon JQuery

Pièce jointe 509791

mon CSS

Pièce jointe 509795

Si quelqu'un aurait une idée , merci d'avance .

cordialement.
14/10/2019, 14h25
Toufik83

Salut ,

Citation:

Envoyé par Histo

Je souhaiterais qu'au verso j'ai un descriptif..

Tu n'as pas un lien en ligne qui est similaire à ce que tu cherches à faire? parce que je n'ai pas bien compris.
14/10/2019, 14h31
Histo

Salut en gros se que j'ai fais faire tourner à 180° , je voudrais au recto avec l'image d'un jeu et au verso le descriptif du jeu.
14/10/2019, 14h49
Watilin

Bonjour,
pour tes prochains posts, ça serait sympa que tu copies-colles ton code sous forme de texte, c’est plus facile à lire / modifier.

Il n’y a pas vraiment de notion de verso dans les transformations CSS. Quand un élément est « retourné », il est simplement affiché à l’envers, comme dans un miroir.
Il faut que tu prévoies un autre élément HTML qui s’affichera à la place de la carte lorsqu’elle est retournée, et qui représentera le dos de la carte.
Si le retournement est instantané, tu peux simplement jouer avec les display. Si tu as des transitions, tu peux utiliser l’évènement transitionend pour remplacer l’élément ~~une fois que l’animation de retournement a terminé~~.

Edit : je viens de réaliser que, dans le cas où tu as des transitions, c’est un peu plus compliqué que ce que j’ai dit. Il faut remplacer la carte par son dos au moment où la rotation atteint 90°, et terminer la rotation avec le dos de la carte. Ça demande un petit peu plus de codage, mais rien d’impossible :)

Je pense que c'est faisable sans javascript.

Code:

1
2
3
4
 
<div class="cartes" data-description='Description.....'>
  <img src="https://via.placeholder.com/150C/O https://placeholder.com/" alt='test' class="presLogo"  />
</div>

Utilisation du pseudo :after :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
.cartes {
  position: relative;width:150px;height:150px;
}
 
.cartes:hover .presLogo{transform: rotateY(-180deg) rotateX(0deg);cursor:pointer}
 
.cartes:hover:after{
  content: attr(data-description);
  color: white;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: white;
}

14/10/2019, 15h17
SpaceFrog

J'imaginais plutot un truc comme ça
https://jsfiddle.net/6tsbd5of/

ou en vertical https://jsfiddle.net/6tsbd5of/1/

Salut Toufik83 j'ai testé ta solution sa ne marche pas malheureusement je regarde de mon côté.

cartes:

Code:

1
2
3
4
5
6
7
8
9
'<div class="divCarte">\
        <div class="cartes" ><img id="V1" src="' + uploadDIR + 'img/cartes/{{images}}"  class="presLogo" /><p id="V2"></p></div>\
        <div class="descriptionCarte">\
            <div class="nomCarte">Jeux de cartes</div>\
            <div class="categorieCarte">{{name}}</div>\
            <div class="prixCarte">{{price}}€</div>\
            <div class="ajoutPanier"><button class="btn btn-primary btn-block add-to-basket">Ajouter au panier</button></div>\
        </div>\
    </div>',

mon code JS:

Code:

1
2
3
4
5
6
7
 $(document).ready(function() { /* fonction qui permet la rotation de l'image*/
 
        $('.presLogo').mouseover(function() {                 /* événement click sur l'image et activation du CSS .rotate*/
                  $(this).toggleClass('rotate');
 
              });
      });

mon

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 .cartes {
   /** Div concernant l'image cliquable de la carte **/
    display:flex;
    justify-content: center;
    padding:2vw;
    width: auto;
    position:relative;
 }
 .presLogo {
   width: 15vw;
   height:15vw;
   border: 3px black solid;
   transition: 3s transform;
 }
 
 .rotate { 
   transform: rotateY(-180deg) rotateX(0deg); 
  }

14/10/2019, 15h34
Toufik83

@SpaceFrog :ccool: :bravo:

Histo regarde les deux solutions de SpaceFrog, elles sont plus élégantes que la mienne.
14/10/2019, 15h47
Histo

SpaceFrog merci pour ta solution je l'est testé elle fonctionne j'ai juste à modifier mon CSS pour que sa passe mais c'est nickel :D.

Merci à tous pour votre aide :merci:
14/10/2019, 16h16
NoSmoking

Bonjour,
on en a parlé il y peu sur le forum CSS, je remets les liens

↪ Discussion : https://www.developpez.net/forums/d2...position-texte

↪ Exemple en ligne : Card flip

Nota :si l'on veut également supporté IE il faut changer d'approche.
↪ Voir l'exemple en ligne : Card flip support IE
14/10/2019, 17h00
Histo

Désolé NoSmoking j'avais pas fait attention . Je ferai plus attention la prochaine fois.

merci , cordialement