Forum d'entraide


Coucou,

Merci de nous rejoindre sur le forum, j'espère que l'on passera de bons moments ensembles.

Au plaisir de te lire dans les différentes catégories.

Le Staff du forum Crea illusion Fantasy.

Forum d'entraide

Aides, Conseils, Forum, Sites web, blogs, tout supports, Graphismes, Tutoriels, Publicités.


AccueilAccueil  FAQFAQ  PortailPortail  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez|

Effet d'affichage de plusieurs images

Voir le sujet précédent Voir le sujet suivant Aller en bas
AuteurMessage
avatar
Messages : 6862
Venue : 27/06/2009 Je suis : Féminin
Né(e) le : 17/09/1963
Age : 54
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 10488
Fondatrice
Ptite_Perle
18 - 16
MessageSujet: Effet d'affichage de plusieurs images Jeu 31 Mai 2018 - 13:09

Introduction

Voici une application des styles css3 utilisant la transformation et la transition pour donner un effet d'affichage de plusieurs images sur le passage de la souris.




Mise en place

La partie html est succincte, la logique étant située au niveau des styles CSS :
Le code html est le suivant :
Code:

<div class="conteneur">
   <div class="parent">
      <div class="aspect-div div1"></div>
      <div class="aspect-div div2"></div>
      <div class="aspect-div div3"></div>
      <div class="aspect-div div4"></div>
      <div class="aspect-div div5"></div>
   </div>
</div>
Nous allons voir en détail la partie CSS :

La div 'conteneur' applique un simple style de mise forme avec la gestion du dépassement masqué (style overflow:hidden), alors que la div 'parent' joue un rôle pour définir la perspective.

Les cinq divisions affichées à l'intérieur appliquent les mêmes effets de transition et de transformation avec des valeurs de translations différentes pour avoir un positionnement spécifique les unes par rapport aux autres.

Les styles appliqués au conteneur et au parent sont les suivant :
Code:

.conteneur{
   border:solid 4px silver;
   border-radius:35px;
   width:620px;
   height:360px;
   margin:0px auto;
   overflow:hidden;
   position:relative;
   background-color:#EDEDED;
}

.parent{
   width:800px;
   height:400px;
   -webkit-perspective : 2500px;
   -moz-perspective : 2500px;
   -o-perspective : 2500px;
   -ms-perspective : 2500px;
   perspective : 2500px;
}
Les styles appliqués à la première div affichant une image sont les suivant :

Le style initiale applique une série de transformations qui positionnent la div de façon inclinée et tournée :
Code:

.div1{
   background-image:url(exemples/galerie/fond1.jpg);
   -webkit-transform: translateX(-60px) scale(0.7, 0.7) rotateY(60deg) skewY(-8deg);
   -moz-transform: translateX(-60px) scale(0.7, 0.7) rotateY(60deg) skewY(-8deg);
   -o-transform: translateX(-60px) scale(0.7, 0.7) rotateY(60deg) skewY(-8deg);
   -ms-transform: translateX(-60px) scale(0.7, 0.7) rotateY(60deg) skewY(-8deg);
}
On défini avec une seconde classe le style générique de la div ainsi que les paramètres de la transition qui aura lieu :
Code:

.aspect-div{
   z-index:1;
   position:absolute;
   background-size:300px 300px;
   border:solid 1px black;
   display:inline-block;
   width:300px;
   height:300px;
   margin-top:30px;
   opacity:0.8;
   cursor:pointer;
   background-image:url(fond1.jpg);
   -webkit-transition: all 800ms linear;
   -moz-transition: all 800ms linear;
   -o-transition: all 800ms linear;
   -ms-transition: all 800ms linear;
}
La transition a lieu au passage de la souris et se défini au niveau CSS avec la pseudo-classe ':hover'. On applique une transformation qui réinitialise le positionnement de la division.
Code:

.div1:hover{
   z-index:10;
   opacity:1;
   -webkit-transform: translateX(20px);
   -moz-transform: translateX(20px);
   -o-transform: translateX(20px);
   -ms-transform: translateX(20px);
}
Revenir en haut Aller en bas
http://www.creaillusionfantasy.com/

Effet d'affichage de plusieurs images

Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 1

Sujets similaires

-
» Changer la couleur de toutes les traces en même temps dans Mapsource
» affichage de plusieurs trace sur le 62
» [Astuce n°1] Héberger plusieurs images en même temps (différents formats)
» format des BMP sur Garmin 3490 : pas d'affichage
» Erreur java affichage didacticiel fourni avec E-Anim

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Forum d'entraide :: Caverne d'Alibaba du forum :: Outils Webmasters-