"Flip" avec Internet Explorer 10

**PatSan** · 29/12/2013, 23h43

Bonjour à tous,
Voici mon souci : je veux faire un 'flip' d'un div avec une info sur le côté recto et une autre sur le côté verso.
Mon script fonctionne très bien excepté sous ce maudit 'Internet Explorer (V10)' : la rotation se fait mais les infos du verso ne s'affichent pas et celle du recto s'affichent à l'envers...
La page de test se trouve sur :
http://www.salondubillard.com/new/testflip.html
Est-ce quelqu'un a déjà été confronté au problème ?
Merci bcp pour vos futurs réponses...

**Bisûnûrs** · 31/12/2013, 10h05

Je viens de faire un truc qui fonctionne sur IE10 également :

Code html :

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

1
2
3
4
<div class="container">
  <div class="item i1">texte recto</div>
  <div class="item i2">texte verso</div>
</div>

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
.container, .item {
  width:200px;
  height:200px;
}
 
.container:hover .i1 {
  transform:perspective(200px) rotateY(180deg);
}
 
.container:hover .i2 {
  transform:perspective(200px) rotateY(0deg);
}
 
.item {
  position:absolute;
  backface-visibility:hidden;
  transition:all 1.0s ease-in-out;
}
 
.i1 {
  background-color:#f00;
  transform:perspective(200px) rotateY(0deg);
}
 
.i2 {
  background-color:#0f0;
  transform:perspective(200px) rotateY(-180deg);
}

C'est "apparemment" parce que IE10 ne propage pas les transformations 3D aux enfants, donc faut les répéter pour chaque enfant :
http://msdn.microsoft.com/en-us/libr...style_property

**NoSmoking** · 31/12/2013, 10h16

Bonjour,
je n'ai pas IE10 mais je vais faire les remarques suivantes

- pourquoi mettre dans les "back" et "front" une DIV.
- tu n’opères une transition sur le hover que sur une seule DIV, .container_flip:hover .animation_flip et non pas sur les DIV "back" et "front".

J'avais eu une autre approche, ce qui ne veut pas dire que la tienne est mauvaise, pour des essais de flip horizontal.

Le fichier test

Code html :

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[CSS3] Flip Horizontal sur :hover</title>
<meta name="Author" content="NoSmoking">
<style>
html,body {
  margin:0;
  padding:0;
  font-size:100%;
  font-family:Verdana,Arial;
  background:#F0E8D8;
}
#page{
  width:50em;
  margin:0 auto;
  position:relative;
}
#header{
  margin: 1em 0;
  padding: 0.5em;
}
#header h1{
  color: #706040;
  font-style:normal;
  margin:0;
  padding:0.5em;
  text-shadow:1px 1px 0px #FFF;
}
#header span {
  float: right;
  font-size: 0.5em;
  font-style: italic;
}
/**
/*  partie animation
**/
.flip_conteneur {
  width:270px;
  margin:1em auto;
  padding:1em;
  border:1px solid #CCF;
  background:#EEE;
}
.flip {
  position: relative;
  width: 270px;
  height: 180px;
  -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
       -o-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 1000px;
     -moz-perspective: 1000px;
       -o-perspective: 1000px;
          perspective: 1000px;
}
.back, .front {
  position: absolute;
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
       -o-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transition: -webkit-transform 1s ease-in;
     -moz-transition:    -moz-transform 1s ease-in;
       -o-transition:      -o-transform 1s ease-in;
          transition:         transform 1s ease-in;
}
.back {
  -webkit-transform: rotateY( 180deg);
     -moz-transform: rotateY( 180deg);
       -o-transform: rotateY( 180deg);
          transform: rotateY( 180deg);
}
.flip_conteneur:hover .back {
  -webkit-transform: rotateY( 0deg);
     -moz-transform: rotateY( 0deg);
       -o-transform: rotateY( 0deg);
          transform: rotateY( 0deg);
}
.flip_conteneur:hover .front {
  -webkit-transform: rotateY( -180deg);
     -moz-transform: rotateY( -180deg);
       -o-transform: rotateY( -180deg);
          transform: rotateY( -180deg);
}
</style>
</head>
<body>
<div id="page">
  <div id="header">
    <h1><span>[CSS3]</span>Flip Horizontal sur :hover</h1>
  </div>
  <div class="flip_conteneur">
    <div class="flip">
      <div class="back"><img src="http://club.developpez.com/webdesign/Rubriques/Web/logo_tous_les_outils_Web.gif" alt=""></div>
      <div class="front"><img src="http://club.developpez.com/webdesign/Rubriques/Web/logo_toutes_les_faq_Web.gif" alt=""></div>
    </div>
  </div>
  <div class="flip_conteneur">
    <div class="flip">
      <div class="back"><img src="http://club.developpez.com/webdesign/Rubriques/Web/logo_tous_les_livres_Web.gif" alt=""></div>
      <div class="front"><img src="http://club.developpez.com/webdesign/Rubriques/Web/logo_tous_les_cours_Web.gif" alt=""></div>
    </div>
  </div>
</div>
</body>
</html>

Je te laisse découvrir.

**PatSan** · 31/12/2013, 14h12

Bonjour à tous !
Merci bcp pour vos réponses...
Voici le résultat des tests sur vos scripts :

Script de NoSmoking:
On y est presque sur ie10 (version 10.0.9200.16721) mais l'effet de flip n'est pas bon : le recto se met en rotation mais il apparaît à l'envers pendant la manoeuvre pour finalement laisser apparaître directement le verso à la fin de la rotation. Je ne sais pas si je suis clair dans mes explications...

Script de Bisûnûrs:
il ne fonctionne ni sur chrome ni sur ie10. Le verso apparaît directement et l'effet de rotation n'est pas déclenché.

Je vous remercie encore pour vos réponses. Je vais creuser sur la remarque de Bisûnûrs

...IE10 ne propage pas les transformations 3D aux enfants...

**Bisûnûrs** · 31/12/2013, 14h21

Chez moi ça fonctionne pourtant très bien avec un IE 10.0.9200.16721.

Tu n'as pas forcé une version précédente dans la developer toolbar ? Je n'ai pas vérifié Chrome, puisqu'il était demandé de faire fonctionner pour IE10 en premier lieu. Pour certains navigateurs, il faudra rajouter les préfixes propriétaires sur les propriétés CSS3.

Exemple qui fonctionne chez moi :
http://josselin.willette.free.fr/cod...ces/flip-css3/

**PatSan** · 31/12/2013, 14h47

Pour Bisûnûrs :
Effectivement, ton script fonctionne sur ie10 via ton lien.
En ajoutant les préfixes -webkit,-moz,-o pour les autres navigateurs, il fonctionne aussi...
Un grand merci !!!!!!!!!!

**NoSmoking** · 31/12/2013, 16h06

Pourriez vous me dire si en remplaçant, dans mon exemple, le CSS sur la transition par celui ci après, le problème reporté par PatSan persiste encore sur IE10.

Code :

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
.back, .front {
  position: absolute;
  -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
       -o-backface-visibility: hidden;
          backface-visibility: hidden;
/* modification prise en compte de all
  -webkit-transition: -webkit-transform 1s ease-in;
     -moz-transition:    -moz-transform 1s ease-in;
       -o-transition:      -o-transform 1s ease-in;
          transition:         transform 1s ease-in;
*/
  -webkit-transition: all 1s ease-in;
     -moz-transition: all 1s ease-in;
       -o-transition: all 1s ease-in;
          transition: all 1s ease-in;
 
}

Merci.

**Bovino** · 02/01/2014, 09h15

IE10 ne propage pas les transformations 3D aux enfants

En fait, c'est parce qu'IE (10 et 11) ne reconnait que la valeur flat pour la propriété transform-style alors que c'est la valeur preserve-3D qui permet d'englober les éléments enfants dans un même contexte 3D (ce qui, j'en conviens, revient au même que ton explication, à la sodomisation de drosophiles près).

transform-style.

"Flip" avec Internet Explorer 10

CSS

Vue hybride

Discussions similaires

Partager

Partager