Discussion :

[Basile le disciple]

Bonjour à tous,

J'essaye de faire un simple effet de flipping qui se retourne que quand on passe sur l'image.
Le problème, bien que le retournement soit appelé dans le OnMouseOver, est que l'image se retourne quand je bouge sur celle-ci, pas que quand je rentre....

Voici mon code :

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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
#flipping{
    position: relative;
    width:400px;
    height:400px;
    top:100px;
    left:100px;
    border:solid 1px black;
    perspective:600;   /* !! distance à laquelle on voit l'animation*/
}  
.back{
    transform: rotateY(-180deg);  
}
#flipping:hover .back{
    /*     transform: rotateY(0deg);*/
}
#flipping:hover .front{
    /*    transform: rotateY(180deg);  */             
}
.back img,.front img{
    border-radius: 10px;
    box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.75);
    width:100%;
    height:100%;
}
.back,.front{
    position: absolute;
    backface-visibility: hidden;  /* !! caché l'arrière*/
    transition:all 0.7s ease-in;
}
.contenu{
    position:absolute;
    left:700px;
    top:110px;
    width:400px;
    height:400px;
    border:solid 1px black;
    background-color: rgba(50,50,50,0.75);
}

Code javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var bool = true;
function Mouseover(obj){  
    var back = obj.getElementsByClassName("back");
    var front =obj.getElementsByClassName("front");
    if (bool === true){
        back[0].style.transform="rotateY(0deg)";
        front[0].style.transform="rotateY(180deg)"; 
        bool=false;
    }else{
        back[0].style.transform="rotateY(180deg)";
        front[0].style.transform="rotateY(0deg)";    
        bool=true;
    }
}

et le HTML :

Code HTML :

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

1
2
3
4
<div id="flipping" onmouseover="Mouseover(this)">
    <div class="back"><img src="ete.png" alt="été"></div>
    <div class="front"><img src="automne.png" alt="automne"></div>
</div>

Quelqu'un voit-il le problème??

[NoSmoking]

Bonjour,
ton mouseover est perdu/repris pendant la transformation, mais je ne vois pas pourquoi tu ne fais pas cela directement en CSS3 !

[Basile le disciple]

Bonsoir et merci NoSmoking

j'ai compris plus tard que le mouseover est appelé quand l'image tourne, provoquant mon problème... (comme tu le dis très justement d'ailleurs)
J'ai donc créé un bloc de même taille et même position que j'ai placé au dessus, et j'ai utilisé son onmouseover.
C'est pas très propre mais ça marche...

mais je ne vois pas pourquoi tu ne fais pas cela directement en CSS3

Je n'ai tout simplement pas réussi à provoqué le retournement que quand la souris arrive sur l'image, pas quand elle en ressort....
Aurais-tu une idée?

[NoSmoking]

Certes si tu ne souhaites qu'un flip, je trouve l'idée un peu surprenante, tu ne peux le faire avec CSS.
Pour la méthode il suffit dans la fonction mouseover désaffecter celle ci de la sorte elle ne se reproduira plus.

Code :

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

1
2
3
4
function Mouseover(obj){
  obj.onmouseover=function(){};  // annule la fonction
  var back = obj.getElementsByClassName("back");
  // la suite du code

[Basile le disciple]

Pour la méthode il suffit dans la fonction mouseover désaffecter celle ci de la sorte elle ne se reproduira plus.

C'est pas mal du tout cette méthode, un grand merci à toi!!