Forum Crea illusion Fantasy
Cube animé Bannie10

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

#Forum d'entraide, une inscription pour nous rejoindre. Les débutants sont les bienvenu aussi :)


 

Partagez

Cube animé

Voir le sujet précédent Voir le sujet suivant Aller en bas
AuteurMessage
Ptite_Perle
Messages : 4708
Venue : 27/06/2009 Je suis : Féminin
Né(e) le : 17/09/1963
Age : 55
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 82586
Fondatrice
Ptite_Perle
MessageSujet: Cube animé Cube animé EmptyJeu 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

Cube animé

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

Sujets similaires

-
» Affichage sous IE des smileys et gif animés
» intégré une anim en fon décran pc
» recadrer l' anim [RESOLU]
» (Resolu] Plantage PC...E-Anim HS
» versions e-anim(Résolu)

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