Discussion :

[n0wis]

Chalut chalut !

Je suis en train de travailler sur un projet personnel qui consiste à essayer de faire un site totalement animé, UNIQUEMENT en HTML et CSS !

Pour le moment, j'ai bidouillé quelque petites choses qui me mettent sur de bonnes pistes. Mais je suis confronté à un premier soucis :

http://pixelsnowis.fr/html5_css3/

En vous rendant sur la page, vous constaterez qu'au moment du clic sur l'image la plus à droite, elle pivote, entraînant avec elle l'image de gauche.
Cependant, j'aimerais que l'effet s'applique lorsque je clic, puis qu'elle reste en place tant qu'un autre clic n'a pas été fait.

J'ai fait des recherches, mais je n'ai réussi à obtenir le résultat attendu

Faut il utilise ::after ? Onclick ? Ou autre ? Comment ?

[Muchos]

Il faudra utiliser un langage dynamique. Donc, voir du côté d'OnClick certainement.
EDIT 2012-10-20: FAUX! C'est possible avec les pseudo-classes :focus ou :target (voir posts suivants).

Pour info, ::after est un pseudo élément placé juste après la balise à laquelle il est rattachée. C'est un "après" spatial, pas temporel

[n0wis]

Mmmh ... Mais comment lier Onclick à du CSS ?

[NoSmoking]

Bonjour,
il te faut modifier quelque peu la structure de ton document en remplaçant la balise DIV par une balise A

Code html :

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

1
2
3
4
5
6
7
8
<a href="#" id="conteneur">
    <div id="text_test_1">
        <img src="img_test_1.jpg">
    </div>
    <div id="text_test_2">
        <img src="img_test_2.jpg">
    </div>
</a>

il te faut modifier également le CSS en lui ajoutant un display:block, pour un problème d’apparence et pour finir tu ajoutes :focus sur la transformation

Code :

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

1
2
3
4
5
6
7
8
9
10
11
#conteneur {
    display: block;
    height: 600px;
    position: relative;
    transition: all 0.5s ease 0s;
    width: 600px;
    z-index: 1;
}
#conteneur:active, #conteneur:focus {
    transform: rotate(-90deg);
}

[n0wis]

J'avais essayé de faire cela, mais je ne sais pourquoi ça ne fonctionnait pas
J'explore actuellement la piste des input de type checkbox avec l’élément :checked. Ça a l'air assez pratique, mais un peu complexe

[NoSmoking]

pour rester CSS3 tu as également la possibilité d'utiliser la pseudo-class :target, la structure devient

Code html :

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

1
2
3
4
5
6
7
8
9
10
<div id="conteneur">
  <a href="#conteneur">
  <div id="text_test_1">
    <img src="img_test_1.jpg">
  </div>
  <div id="text_test_2">
    <img src="img_test_2.jpg">
  </div>
  </a>
</div>

avec

Code css :

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

1
2
3
#conteneur:target {
  transform: rotate(-90deg);
}