Bonjour, 

Petite question je crois complexe ( je crois hein !! pas sur ) : 

Je tente d'afficher 4 flipbox en 2x2 : 2 en haut et 2 en bas juste en dessous.

Chaque flipbox contient deux div : 1 front et 1 back, le but est quand je passes la souris sur l'image de front, cela tourne et affiche l'image de back.

Le tout est positionné sur un grid que j'ai déclaré avec un grid-area : a b ( les deux flipbox du haut ) c d ( les deux flipbox du bas )

Mon probleme est le suivant : tant que je ne mets pas de photos dans les "back" tout se passe très bien, ca se positionne, ca tourne, pas de probleme.

Mais quand je mets une photo en "front" et une photo en " back" alors la c'est la cata : les deux photos ne se superpose pas mais se positionnent l'une au dessus de l'autre, du coup ca bouffe tout l'effet souhaité.

Ci dessous le code HTML : 

    <div class="zonetuile">
      <div class="flipbox1">
        <div class="back1"><!--<img src="photos/petit/arrierehautgauche.jpg" alt="arrierehautgauche" width="280">--></div>
        <div class="front1"><img src="photos/petit/hautgauche.jpg" alt="hautgauche" width="280"></div>
      </div>

      <div class="flipbox2">
        <div class="back2"><!--<img src="photos/petit/arrierehautdroit.jpg" alt="arrierehautdroit" width="280">--></div>
        <div class="front2"><img src="photos/petit/hautdroit.jpg" alt="hautdroit" width="280"></div>
      </div>

      <div class="flipbox3">
        <div class="back3"><!--<img src="photos/petit/arrierehautdroit.jpg" alt="arrierehautdroit" width="280">--></div>
        <div class="front3"><img src="photos/petit/basgauche.jpg" alt="basgauche" width="280"></div>
      </div>

      <div class="flipbox4">
        <div class="back4"><!--<img src="photos/petit/arrierehautdroit.jpg" alt="arrierehautdroit" width="280">--></div>
        <div class="front4"><img src="photos/petit/basdroit.jpg" alt="basdroit" width="280"></div>
      </div>
    </div>

et Ci dessous le code CSS3 : 

h2 {
  text-align: center;
  justify-content: center;
  font-weight: bold;
  color: green;
  position: relative;
}
/************* Mets en place la grille**************/
.zonetuile {
	text-align: center;
	justify-content: center;
	display: grid;
	grid-template-columns: 290px;
	grid-template-areas: "a b"
						           "c d";
}
/**************** Attribu le positionnement sur la grille**********/
.flipbox1 {
	grid-area :a;
}

.flipbox2 {
	grid-area: b;
}

.flipbox3 {
	grid-area: c;
}

.flipbox4 {
	grid-area: d;
}

/************* Mouvement des FACES des tuiles ************/
.front1, .back1, .front2, .back2, .front3, .back3, .front4, .back4 {
	position: relative;
 	backface-visibility: hidden;
 	transition: transform 1s;
 }

.front1, .front2, .front3, .front4 {
  transform: rotateY(0deg);
}

.back1, .back2, .back3, .back4 {
  transform: rotateY(180deg);
}

/************* Retourne les tuiles au passage de la sourie***************/
.flipbox1:hover .front1 {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.flipbox1:hover .back1 {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

.flipbox2:hover .front2 {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.flipbox2:hover .back2 {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

.flipbox3:hover .front3 {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.flipbox3:hover .back3 {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

.flipbox4:hover .front4 {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.flipbox4:hover .back4 {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

Sachant que dans le code HTML que j'ai posté les photos de back sont désactives comme vous pouvez le voir, cela permets de se rendre compte que cela fonctionne sans ces dernières, une fois qu'on les re-active alors la c'est le bazar.

Si qqun peut me résoudre le problème je lui en serai éternellement reconnaissant, la je suis dans l'impasse.

En vous remerciant beaucoup

-
Edité par Olvire 25 mai 2017 à 18:17:28

Salut,

Oooh, du grid layout, voilà qui fait plaisir !

Alors déjà, simplifions ton code : pourquoi avoir plusieurs classes différentes destinées à faire exactement la même chose ? Du reste, tu peux zapper les préfixes pour transform. Et  la petite astuce qui va bien : donne des noms de classe plus explicite aux éléments.

Bon, ce qu'il se passe dans ton code, c'est que même si un élément est "rotaté" de façon à ne pas être visible, il existe quand même, et sa hauteur est réservée dans le flux. Du coup, une solution possible c'est de mettre les flipbox en position relative avec une hauteur définie, et les deux versions de l'image dedans en position absolute, afin qu'ils soient positionnés hors du flux.

Ce qui donnerait ceci : https://jsfiddle.net/jx0zc690/1/ 

-
Edité par EmmanuelBeziat 25 mai 2017 à 18:43:48

Bonsoir.........

Je t'aime tu m'as sauvé 3 jours de taf et evité la noyade dans un shot de Rhum.

Ca marche et en effet c'est plus simlple, je gere mal les positionnement, et je trouve que grid c'est VACHEMENT bien pour faire ca en tout cas, ca m'a permis de découper une photo en 4 parties égales et d'affecter les flipbox a chaque partie du coup la photo a l'air intacte et quand on passe la sourie, les parties se tournent.

Nickel.

Par contre je suis navré mais du coup ce n'est plus centré sur la page, pourtant j'ai pas l'impression que tu ais touché la mise en page, je comprends pas. J'ai les yeux qui se croisent ca doit etre une balise a la *** que j'ai oublié mais la je la vois pas LOL

-
Edité par Olvire 25 mai 2017 à 19:51:19