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|

Cube animé

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: Cube animé Jeu 31 Mai 2018 - 13:14
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 appliqué l'animation de déplacement et enfin les six différentes
positionnées spécifiquement dans l'espace pour former le cube.
Le code html est le suivant :
Code:

<div id="conteneur">
   <div class="parent">
      <div class="face cote6">6</div>
      <div class="face cote5">5</div>
      <div class="face cote4">4</div>
      <div class="face cote3">3</div>
      <div class="face cote2">2</div>
      <div class="face cote1">Start</div>
   </div>
</div>
Au niveau de la partie CSS, le conteneur 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:position:relative;
   width:300px;
   height:200px;
   margin:0px auto;
   -webkit-perspective:2800px;
   -webkit-perspective-origin:50% 50%;
   -moz-perspective:2800px;
   -moz-perspective-origin:50% 50%;
   -o-perspective:2800px;
   -o-perspective-origin:50% 50%;
}
Une fois la perspective déterminée, on peut définir le positionnement des div pour former le cube :
Code:

.face{
   width:300px;
   height:300px;
   position:absolute;
   line-height:300px;
   text-align:center;
   font-size:80px;
   opacity:0.7;
   border:solid 1px black;
}

.cote1{
   background-color:silver;
   z-index:10;
}
.cote2{
   background-image:url(exemples/galerie/fond1.jpg);
   transform:translateZ(-150px) translateX(150px) rotateY(90deg);
   -webkit-transform:translateZ(-150px) translateX(150px) rotateY(90deg);
   -moz-transform:translateZ(-150px) translateX(150px) rotateY(90deg);
   -o-transform:translateZ(-150px) translateX(150px) rotateY(90deg);
   -ms-transform:translateZ(-150px) translateX(150px) rotateY(90deg);
}
.cote3{
   background-image:url(exemples/galerie/fond2.jpg);
   transform:translateZ(-150px) translateX(-150px) rotateY(-90deg);
   -webkit-transform:translateZ(-150px) translateX(-150px) rotateY(-90deg);
   -moz-transform:translateZ(-150px) translateX(-150px) rotateY(-90deg);
   -o-transform:translateZ(-150px) translateX(-150px) rotateY(-90deg);
   -ms-transform:translateZ(-150px) translateX(-150px) rotateY(-90deg);
}
.cote4{
   background-image:url(exemples/galerie/fond3.jpg);
   transform:translateZ(-150px) translateY(150px) rotateX(-90deg);
   -webkit-transform:translateZ(-150px) translateY(150px) rotateX(-90deg);
   -moz-transform:translateZ(-150px) translateY(150px) rotateX(90deg);
   -o-transform:translateZ(-150px) translateY(150px) rotateX(-90deg);
   -ms-transform:translateZ(-150px) translateY(150px) rotateX(-90deg);
}
.cote5{
   background-image:url(exemples/galerie/fond4.jpg);
   transform:translateZ(-150px) translateY(-150px) rotateX(90deg);
   -webkit-transform:translateZ(-150px) translateY(-150px) rotateX(90deg);
   -moz-transform:translateZ(-150px) translateY(-150px) rotateX(90deg);
   -o-transform:translateZ(-150px) translateY(-150px) rotateX(90deg);
   -ms-transform:translateZ(-150px) translateY(-150px) rotateX(90deg);
}
.cote6{
   background-image:url(exemples/galerie/fond5.jpg);
   transform:translateZ(-300px);
   -webkit-transform:translateZ(-300px);
   -moz-transform:translateZ(-300px);
   -o-transform:translateZ(-300px);
   -ms-transform:translateZ(-300px);
}
Finalement, on déclare pour l'élément
parent l'animation qui sera appliquée :
Code:

.parent{
   position:relative;
   width:300px;
   height:300px;
   animation:AnimCube 5s linear infinite;
   transform-style: preserve-3d;
   -webkit-animation:AnimCube 5s linear infinite;
   -webkit-transform-style: preserve-3d;
   -moz-animation:AnimCube 5s linear infinite;
   -moz-transform-style: preserve-3d;
   -o-animation:AnimCube 5s linear infinite;
   -o-transform-style: preserve-3d;
   -ms-animation:AnimCube 5s linear infinite;
   -ms-transform-style: preserve-3d;
}

@keyframes AnimCube{
   from {}
   to{ transform-origin: 50% 50%; transform: rotateZ(360deg)
   rotateY(360deg) rotateX(360deg); }
}
@-webkit-keyframes AnimCube{
   from {}
   to{ -webkit-transform-origin: 50% 50%; -webkit-transform: rotateZ(360deg)
   rotateY(360deg) rotateX(360deg); }
}
@-moz-keyframes AnimCube{
   from {}
   to{ -moz-transform-origin: 50% 50%; -moz-transform: rotateZ(360deg)
   rotateY(360deg) rotateX(360deg); }
}
@-o-keyframes AnimCube{
   from {}
   to{ -o-transform-origin: 50% 50%; -o-transform: rotateZ(360deg)
   rotateY(360deg) rotateX(360deg); }
}
@-ms-keyframes AnimCube{
   from {}
   to{ -ms-transform-origin: 50% 50%; -ms-transform: rotateZ(360deg)
   rotateY(360deg) rotateX(360deg); }
}

Revenir en haut Aller en bas
http://www.creaillusionfantasy.com/

Cube animé

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

Sujets similaires

-
» Erreur java affichage didacticiel fourni avec E-Anim
» [Résolu] e-anim fx ?
» manuel de code e-anim
» compteur php dans page générée par e-anim
» Affichage sous IE des smileys et gif animés

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-