Chapitre 5
Manipulation d'images
Retour Accueil CSS
39 Retournement dynamique (II).
Termes CSS clés employés : transform:translate(), transform:rotate(), :active.
Compatibilité navigateurs : IE10+, Firefox16+. Chrome et Safari avec le préfixe -webkit-.
Il est possible de modifier l’exemple précédent de différentes façons.
Tout d’abord, la rotation pourrait être effectuée selon l’axe des X plutôt que sur l’axe des Y :
#faceB{transform:rotateX(180deg);}
#flip:active {transform:rotateX(180deg);}
Ensuite, avec ce pseudo-élément, le retournement ne reste actif que pendant que le bouton de la souris
est enfoncé alors que le focus est sur la carte. Si toutefois vous déplacez le pointeur en dehors de
la carte tout en ayant laissé le bouton enfoncé, la carte reste retournée jusqu’au prochain clic : vérifiez vous-même.
Retournement
Nous pourrions essayer de renforcer la sélectivité en employant :
.conteneur:hover #flip2:active (…)
Cela n’est toutefois que partiellement satisfaisant, car si la carte revient à son état initial lorsque le pointeur n’est plus sur le conteneur, jusqu’au prochain clic il suffit de survoler le conteneur pour qu’elle se retourne à nouveau : le statut :active demeure jusqu’à ce qu’un autre élément l’acquière. Je n’ai pas trouvé de moyen de l’éviter…
Enfin, le retournement pourrait être amélioré en ayant recours aux transitions.
#flip2{
…
transition:.5s ease-in-out;
}
Le retournement n’est plus instantané, augmentant l’intérêt visuel.
Retournement (II)
Retour Accueil CSS
|
|
|---|