Discussion :

[Histo]

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



mon JQuery



mon CSS




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

cordialement.

[Toufik83]

Salut ,

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.

[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.

[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

[Toufik83]

Je pense que c'est faisable sans javascript.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
}

[SpaceFrog]

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

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

[Histo]

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

cartes:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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); 
  }

[Toufik83]

@SpaceFrog

Histo regarde les deux solutions de SpaceFrog, elles sont plus élégantes que la mienne.

[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 .

Merci à tous pour votre aide

[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

[Histo]

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

merci , cordialement