Balise backface-visibility

**seb_92** · 07/12/2012, 11h52

Bonjour,

Je m'en remet à vous pour un problème, pas spécialement bloquant, que je n'arrive pas à résoudre...
N'étant pas spécialiste en la matière, cela fait quelques jours que je développe une page web et que je rencontre un problème avec la balise backface-visibility.

Voici mon code :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Mon site</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel ="stylesheet" type="text/css" href="test_css.css">
 
   </head>
 
	<body>
<div id="scene3D">
  <div id="flip">
    <div>Le texte dans mon carré rouge</div>
  </div>
</div>
   </body>
</html>

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
19
20
21
22
23
24
25
26
27
#scene3D{
width:300px;
      height:300px;
      perspective:500px;   
}
 
#flip{
      width:300px;
      height:300px;
      transform: rotateX(0deg);
      transition:all 1s ease;
}
 
#flip div
{
    position:absolute;
    width:300px;
    height:300px;
    background:red; 
    -moz-backface-visibility : hidden;
    -webkit-backface-visibility : hidden;
    -ms-backface-visibility : hidden;
}
#scene3D:hover #flip
{
      transform: rotateX(180deg);
}

Le problème venant du fait que la backface n'est absolument pas caché lorsque le carré fait sa rotation... Alors que si je fais une rotation des le départ de 180deg dans la balise "#flip div" le carré est caché mais je ne vois plus rien quelque soit la face...

Merci d'avance pour votre aide!!

PS: j'utilise Firefox.

**Muchos** · 07/12/2012, 15h39

Ne faut-il pas mettre la propriété (

) backface-visibility sur #flip et non sur #flip div ?

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
 
#flip {
	position: absolute;
	width: 300px;
	height: 300px;
	background: red; 
	-moz-backface-visibility: hidden; /* Gecko */
	-webkit-backface-visibility: hidden; /* Webkit */
	-ms-backface-visibility: hidden; /* IE */
	backface-visibility: hidden; /* Standard */
}

**seb_92** · 07/12/2012, 16h08

Merci pour ta réponse et la correction de langage, ça m'a perturbé quand je l'ai écris

.
Effectivement ça marche mais j'ai quand même un comportement bizarre!

En fait, pour détailler un peu plus mon objectif, j'ai suivi ce tuto : http://www.html5-css3.fr/css3/transformations-3d-css3
Et je suis toujours face au même problème avec backface-visibility car cela ne m'affiche pas la face verte mais que la face rouge recto-verso sans que la propriété face effet...
Et si je mets la propriété dans #flip, je ne vois plus de rouge mais que le vert!

Code :

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

1
2
3
4
5
6
7
 
<div id="scene3D">
  <div id="flip">
    <div>Le texte dans mon carré rouge</div>
	<div>Le texte dans mon carré vert</div>
  </div>
</div>

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
19
20
21
22
23
24
25
26
27
28
29
 
#scene3D{
width:300px;
      height:300px;
      perspective:500px;   
}
#flip{
      width:300px;
      height:300px;
      transform: rotateX(0deg);
      transition:all 1s ease;
}
#scene3D:hover #flip{
      transform: rotateX(180deg);
}
#flip div{
      position:absolute;
      width:300px;
      height:300px;
      background:red; 
	-moz-backface-visibility: hidden; /* Gecko */
	-webkit-backface-visibility: hidden; /* Webkit */
	-ms-backface-visibility: hidden; /* IE */
	backface-visibility: hidden; /* Standard */    
}
#flip div:last-child{
      background:green;
	  transform: rotateX(180deg);
}

Cela semble marcher chez les autres mais pas chez moi, snif...

**Muchos** · 07/12/2012, 17h11

Franchement, vu comment leur tuto est mal fait, c'est normal de ne pas y arriver

**NoSmoking** · 08/12/2012, 18h43

Bonjour,
il te manque une "face" pour que l'effet soit complet, c'est deux DIVs qui tournent en même temps. Il te faut donc au départ une structure de ce style

Code html :

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

1
2
3
4
5
6
<div id="scene3D">
  <div id="flip">
    <div><p>Le texte dans mon carré rouge</p></div>
    <div><p>Le texte dans mon carré vert</p></div>
  </div>
</div>

en ce qui concerne le CSS il faut synthétiser ce qui est indiqué dans le "tuto" pour obtenir un style dans ce style

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
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
#scene3D{
  width:300px;
  height:300px;
  border:1px solid #D0D0D0;
  background-color:#F0F0F0;
 
  -webkit-perspective:500px;
     -moz-perspective:500px;
      -ms-perspective:500px;
       -o-perspective:500px;
          perspective:800px;
 
}
#scene3D:hover #flip{
  -webkit-transform:rotateX(180deg);
     -moz-transform:rotateX(180deg);
      -ms-transform:rotateX(180deg);
       -o-transform:rotateX(180deg);
          transform:rotateX(180deg);
}
#scene3D div{
  width:300px;
  height:300px;
 
  -webkit-transform:rotateX(0deg);
     -moz-transform:rotateX(0deg);
      -ms-transform:rotateX(0deg);
       -o-transform:rotateX(0deg);
          transform:rotateX(0deg);
  -webkit-transition:all 1s ease;
     -moz-transition:all 1s ease;
      -ms-transition:all 1s ease;
       -o-transition:all 1s ease;
          transition:all 1s ease;
}
#scene3D div:hover{
  -webkit-transform:rotateX(180deg);
     -moz-transform:rotateX(180deg);
      -ms-transform:rotateX(180deg);
       -o-transform:rotateX(180deg);
          transform:rotateX(180deg);
}
#flip{
  -webkit-transform:rotateX(0deg);
     -moz-transform:rotateX(0deg);
      -ms-transform:rotateX(0deg);
       -o-transform:rotateX(0deg);
          transform:rotateX(0deg);
  -webkit-transition:all 1s ease;
     -moz-transition:all 1s ease;
      -ms-transition:all 1s ease;
       -o-transition:all 1s ease;
          transition:all 1s ease;
  -webkit-transform-style:preserve-3d;
     -moz-transform-style:preserve-3d;
      -ms-transform-style:preserve-3d;
       -o-transform-style:preserve-3d;
          transform-style:preserve-3d;
}
#flip div{
  position:absolute;
  width:300px;
  height:300px;
  background:red;
 
  -webkit-backface-visibility:hidden;
     -moz-backface-visibility:hidden;
      -ms-backface-visibility:hidden;
       -o-backface-visibility:hidden;
          backface-visibility:hidden;
}
#flip div:last-child{
  background:green;
 
  -webkit-transform:rotateX(180deg);
     -moz-transform:rotateX(180deg);
      -ms-transform:rotateX(180deg);
       -o-transform:rotateX(180deg);
          transform:rotateX(180deg);
}

et là cela marche, enfin pas sur tous les navigateurs malgré les préfixes vendeurs

Tu peux donc très largement épurer le code CSS.

nota: pour le "tuto" c'est dommage qu'il n'ait pas mis le code de la démo finale, mais on peut toujours synthétiser

**seb_92** · 10/12/2012, 09h53

Merci beaucoup pour vos réponse à tout les deux, je vais faire plus attention à mes sources sérieux...
Cela marche nikel.

Balise backface-visibility

CSS

Vue hybride

Discussions similaires

Partager

Partager