Obligation de modifier un élément du code pour chaque utilisation

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Obligation de modifier un élément du code pour chaque utilisation

Message par Cheeralex le Lun 20 Juil 2015 - 10:49

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :
Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Obligation de changer le code à chaque utilisation
Lien du forum : http://dol-baran.forumactif.org/

Description du problème

Bonjour !!

Me voici avec un léger souci pratique plus que déformation ou autre. Il s'agit d'un code qui permet de retourner une image. Nous avons donc deux images, une face et un dos, que l'on peut retourner pour voir derrière ect... L'ennui réside dans le fait que nous sommes obligés de changer un chiffre dans chaque code sinon, le codage ne fonctionne plus. Et quand on doit mettre une vingtaine de carte qui se retourne dans un seul message, ça devient un peu lassant. Alors, s'il y a un moyen de ne pas avoir à tout modifier à chaque fois, ça serait vraiment sympathique (et ça changerait la vie) Yahoo

Merci par avance de votre attention,
Hi

CSS:
Code:
.f1_container {
  position: relative;
  margin: 10px auto;
  width: 250px;
  height: 350px;
  z-index: 1;

  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -o-perspective: 1000px;
  perspective: 1000px;
  display: inline-block;
}
 
 
.f1_container input{display:none}

.f1_container .f1_card {
    width:100%;
    height:100%;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: all 1.0s linear;
  -moz-transform-style: preserve-3d;
  -moz-transition: all 1.0s linear;
  -o-transform-style: preserve-3d;
  -o-transition: all 1.0s linear;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
    display:block;
}
   
.f1_container input:checked + .f1_card{
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.f1_container .face {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}

.f1_container .face.back {
  display: block;
  -webkit-transform: rotateY(180deg);
  -webkit-box-sizing: border-box;
  -moz-transform: rotateY(180deg);
  -moz-box-sizing: border-box;
  -o-transform: rotateY(180deg);
  -o-box-sizing: border-box;
  transform: rotateY(180deg);
  box-sizing: border-box;
  text-align: center;
}


Exemple type de code HTML:
Code:
<div class="f1_container"><input type="checkbox" id="button1"><label class="f1_card" for="button1"><div class="front face"><img src="http://img15.hostingpics.net/pics/969367N2fauchon.png"></div><div class="back face center"><img src="http://i56.servimg.com/u/f56/17/36/79/45/faucho10.png"></div></label></div><div class="f1_container"><input type="checkbox" id="button2"><label class="f1_card" for="button2"><div class="front face"><img src="http://img15.hostingpics.net/pics/233438N2hachelancer.png"></div><div class="back face center"><img src="http://i56.servimg.com/u/f56/17/36/79/45/hache10.png"></div></label></div><div class="f1_container"><input type="checkbox" id="button3"><label class="f1_card" for="button3"><div class="front face"><img src="http://img15.hostingpics.net/pics/489769N2maingauche.png"></div><div class="back face center"><img src="http://i56.servimg.com/u/f56/17/36/79/45/mainga10.png"></div></label></div><div class="f1_container"><input type="checkbox" id="button4"><label class="f1_card" for="button4"><div class="front face"><img src="http://img15.hostingpics.net/pics/531835N2avantbras.png"></div><div class="back face center"><img src="http://i56.servimg.com/u/f56/17/36/79/45/protec10.png"></div></label></div><div class="f1_container"><input type="checkbox" id="button5"><label class="f1_card" for="button5"><div class="front face"><img src="http://img15.hostingpics.net/pics/903752N2capecoton.png"></div><div class="back face center"><img src="http://i56.servimg.com/u/f56/17/36/79/45/capeco10.png"></div></label></div><div class="f1_container"><input type="checkbox" id="button6"><label class="f1_card" for="button6"><div class="front face"><img src="http://img15.hostingpics.net/pics/552290N2capuchon.png"></div><div class="back face center"><img src="http://i56.servimg.com/u/f56/17/36/79/45/capuch11.png"></div></label></div><div class="f1_container"><input type="checkbox" id="button7"><label class="f1_card" for="button7"><div class="front face"><img src="http://img15.hostingpics.net/pics/892653N2chaussures.png"></div><div class="back face center"><img src="http://i56.servimg.com/u/f56/17/36/79/45/chauss10.png"></div></label></div><div class="f1_container"><input type="checkbox" id="button8"><label class="f1_card" for="button8"><div class="front face"><img src="http://img15.hostingpics.net/pics/140393N2passantdarme.png"></div><div class="back face center"><img src="http://i56.servimg.com/u/f56/17/36/79/45/passan10.png"></div></label></div><div class="f1_container"><input type="checkbox" id="button9"><label class="f1_card" for="button9"><div class="front face"><img src="http://img15.hostingpics.net/pics/807570N2pantalon.png"></div><div class="back face center"><img src="http://i56.servimg.com/u/f56/17/36/79/45/pantal11.png"></div></label></div><div class="f1_container"><input type="checkbox" id="button10"><label class="f1_card" for="button10"><div class="front face"><img src="http://img15.hostingpics.net/pics/310989N2robefemme.png"></div><div class="back face center"><img src="http://i56.servimg.com/u/f56/17/36/79/45/robe11.png"></div></label></div>
(Vous remarquerez qu'on change à chaque fois l'ID avec un chiffre différent sinon, ça ne fonctionne pas Smile )


Dernière édition par Cheeralex le Lun 20 Juil 2015 - 13:52, édité 1 fois

Cheeralex
***

Féminin
Messages : 112
Inscrit(e) le : 29/02/2012

http://tmtn.forumactif.org/
Cheeralex a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Obligation de modifier un élément du code pour chaque utilisation

Message par demeter1 le Lun 20 Juil 2015 - 12:59

Si chaque carte doit fonctionner de manière indépendante, vous n'avez aucun autre choix. Si toutes cartes doivent se retourner en même temps, vous pouvez mettre la même id.

demeter1
+ Hyperactif +

Masculin
Messages : 8232
Inscrit(e) le : 23/01/2009

http://altitudetropicale.forums-actifs.com/index.forum
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Obligation de modifier un élément du code pour chaque utilisation

Message par Cheeralex le Lun 20 Juil 2015 - 13:52

Bonjour,

Oh d'accord. Non, c'est de manière indépendante en fait. Ce n'est pas grave, on continuera à toutes les nommer I love you
Merci beaucoup pour ta réponse et bonnes vacances Hi

Cheeralex
***

Féminin
Messages : 112
Inscrit(e) le : 29/02/2012

http://tmtn.forumactif.org/
Cheeralex a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum