Forum d'entraide
Crea illusion Fantasy


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
Crea illusion Fantasy

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


AccueilAccueil  FAQFAQ  PortailPortail  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez|

Css3 pour la mise en place d'un tourniquet images

Voir le sujet précédent Voir le sujet suivant Aller en bas
AuteurMessage
avatar
Messages : 4984
Venue : 27/06/2009 Je suis : Féminin
Né(e) le : 17/09/1963
Age : 55
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 10526
Fondatrice
Ptite_Perle
18 - 16
MessageSujet: Css3 pour la mise en place d'un tourniquet images Jeu 31 Mai 2018 - 13:07

Voici une application des styles css3 pour la mise en place d'un tourniquet affichant des images. Cet exemple permet de stopper et reprendre l'animation au survol des images.

Mise en place

La partie html se compose d'un conteneur global sur lequel on définit la perspective, d'un conteneur parent sur lequel est appliquer l'animation globale, et enfin les huit différentes
affichant les images et positionnées spécifiquement par une transformation CSS.
Le code html est le suivant :
Code:

<div id="conteneur">
   <div class="parent" onmouseover="PauseAnim();" onmouseout="LectureAnim();">
      <div class="diapositive diapo1"></div>
      <div class="diapositive diapo2"></div>
      <div class="diapositive diapo3"></div>
      <div class="diapositive diapo4"></div>
      <div class="diapositive diapo5"></div>
      <div class="diapositive diapo6"></div>
      <div class="diapositive diapo7"></div>
      <div class="diapositive diapo8"></div>
   </div>
</div>
Au niveau de la parie CSS, le containeur global est l'endroit adéquat dans lequel définir la notion de perspective pour des transformations 3D. Elle est initialisée avec les styles CSS perspective et perspective-origin.

Code:

#conteneur{
   width:550px;
   height:300px;
   border:solid 1px black;
   position:absolute;
   perspective:800px;
   perspective-origin:10% 50%;
   -webkit-perspective:600px;
   -webkit-perspective-origin:10% 50%;
   -moz-perspective:800px;
   -moz-perspective-origin:10% 50%;
   -o-perspective:800px;
   -o-perspective-origin:10% 50%;
}
Une fois la perspective déterminée, on peut définir le style des diapositives sur lesquelles sont appliquées les rotations autour de l'axe Y. Dans notre exemple, chaque diapositive subie une rotation de 45 degrés de plus que la précédente. La transformation a comme origine sur l'axe Y la valeur 0, c'est à dire que le centre de la rotation se situe au niveau du bord gauche des éléments
(alors que par défaut l'origine de la transformation est valorisée à 50%, c'est à dire au centre de l'élément).

Remarque : pour la transformation -moz-transform (Firefox), on ajoute une très faible translation sur l'axe Z. La gestion de la propriété z-index étant mal gérée par Firefox pour les rotations 3D (la propriété transform-style:preserve-3D devant permettre cette gestion), le positionnement distinct des éléments sur l'axe Z corrige ce mauvais comportement.

Code:


.diapositive{
   position:absolute;
   height:150px;
   width:180px;
   opacity:0.9;
   border:solid 1px black;
   border-radius:8px;
   top:75px;
   left:250px;
   background-size:cover;

   transform-origin:0% 50%;
   -webkit-transform-origin:0% 50%;
   -moz-transform-origin:0% 50%;
   -o-transform-origin:0% 50%;
}

.diapo1{
   transform:rotateY(0deg);
   -webkit-transform:rotateY(0deg);
   -moz-transform:rotateY(0deg) translateZ(1px);
   -o-transform:rotateY(0deg);
   background-image:url(fond5.jpg);
}
.diapo2{
   transform:rotateY(45deg);
   -webkit-transform:rotateY(45deg);
   -moz-transform:rotateY(45deg) translateZ(2px);
   -o-transform:rotateY(45deg);
   background-image:url(fond1.jpg);
}

Finalement, on déclare pour l'élément
parent l'animation qui sera appliquée : une rotation continue sur l'axe Y. On applique également le style CSS transform-style:preserve:3d pour préserver les éléments enfants dans un espace en 3 dimensions.
Code:

#parent{
   position:absolute;
   animation:tourne 8s linear infinite;
   transform-origin:250px 50%;
   transform-style: preserve-3d;
   -webkit-animation:tourne 8s linear infinite;
   -webkit-transform-origin:250px 50%;
   -webkit-transform-style: preserve-3d;
   -moz-animation:tourne 8s linear infinite;
   -moz-transform-origin:250px 50%;
   -moz-transform-style: preserve-3d;
   -o-animation:tourne 8s linear infinite;
   -o-transform-origin:250px 50%;
   -o-transform-style: preserve-3d;
}
Un code javascript a également été ajouté pour arrêter et reprendre l'animation sur les évènements onmouseover et onmouseout de l'élément parent.

Code:

function PauseAnim() {
   document.getElementById('parent').style.animationPlayState='paused';
   document.getElementById('parent').style.MozAnimationPlayState='paused';
   document.getElementById('parent').style.WebkitAnimationPlayState='paused';
   document.getElementById('parent').style.OAnimationPlayState='paused';
}

function LectureAnim() {
   document.getElementById('parent').style.animationPlayState='running';
   document.getElementById('parent').style.MozAnimationPlayState='running';
   document.getElementById('parent').style.WebkitAnimationPlayState='running';
   document.getElementById('parent').style.OAnimationPlayState='running';
}
Revenir en haut Aller en bas
http://www.creaillusionfantasy.com/

Css3 pour la mise en place d'un tourniquet images

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

Sujets similaires

-
» Aide pour la mise en place d'un script
» Délais mise en place fibre dans immeuble
» mise en place d'une table
» mise en place de skype sur mon forum
» Amélioration FDF: Mise en place les web-pages Questions/Réponses fréquentes

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