ICI header("Location: http://www.mytesting.fr ");

CONSTRUIRE UN CUBE ANIME AVEC DU CODE HTML ET DU CSS.

par André Marini 24 Mars 2015, 10:50 Images

CET ARTICLE EST TRES LONG. IL CONVIENT DE LE SUIVRE PAS A PAS.

Pour construire un cube animé, nous allons utiliser un code html et du CSS.

 

Ce qu'il faut savoir:

 

Lorsqu'on intègre du CSS au html, il faut toujours le placer entre des balises <style></style> 

CONTENEUR EN HTML

 

<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">
1</div>
</div>
</div>

Nous allons maintenant définir en CSS, la perspective du conteneur global. Ce CSS sera donc placé après la fermeture du div "conteneur".

 

<style>

#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%; 
}</style>

Puis, toujours en CSS nous déclarons l'élément <div> parent pour l'animation appliquée : Ce code sera donc placé après la fermeture du div "parent". 

 

<style>

.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); } 
}

</style>

Toujours en CSS (marron) mais avec le html (bleu), passons maintenant aux 6 faces du cube sur lesquelles j'ai parfois placé des images ( en noir, l'url de l'image)

FACE 6

 

<div class="face cote6"><style>.face{
width:300px;
height:300px;
position:absolute;
line-height:300px;
text-align:center;
font-size:80px;
opacity:80;
border:solid 1px black;

}.cote6{
background-image:url(
http://img.over-blog-kiwi.com/1/30/51/51/20150324/ob_1a008b_essai1.JPG
);
transform:translateZ(-300px);
-webkit-transform:translateZ(-300px);
-moz-transform:translateZ(-300px);
-o-transform:translateZ(-300px);
-ms-transform:translateZ(-300px);
}
</style></div>

CONSTRUIRE UN CUBE ANIME AVEC DU CODE HTML ET DU CSS.

FACE 5

 

<div class="face cote5"><style>.face{
width:300px;
height:300px;
position:absolute;
line-height:300px;
text-align:center;
font-size:80px;
opacity:80;
border:solid 1px black;
}.cote5{
background-image:url(
http://img.over-blog-kiwi.com/1/30/51/51/20150324/ob_cea78e_essai2.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);
}
</style></div>

CONSTRUIRE UN CUBE ANIME AVEC DU CODE HTML ET DU CSS.

FACE 4

 

<div class="face cote4"><style>.face{
width:300px;
height:300px;
position:absolute;
line-height:300px;
text-align:center;
font-size:80px;
opacity:80;
border:solid 1px black;
}.cote4{
background-image:url(
http://img.over-blog-kiwi.com/1/30/51/51/20150324/ob_4b615d_essai3.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);
}
</style></div>

CONSTRUIRE UN CUBE ANIME AVEC DU CODE HTML ET DU CSS.

FACE 3

 

<div class="face cote3"><style>.face{
width:300px;
height:300px;
position:absolute;
line-height:300px;
text-align:center;
font-size:80px;
opacity:80;
border:solid 1px black;
}.cote3{
background-image:url(
http://img.over-blog-kiwi.com/1/30/51/51/20150324/ob_7d3b26_essai4.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);
}
</style></div>

CONSTRUIRE UN CUBE ANIME AVEC DU CODE HTML ET DU CSS.

FACE 2

 

<div class="face cote2"><style>.face{
width:300px;
height:300px;
position:absolute;
line-height:300px;
text-align:center;
font-size:80px;
opacity:80;
border:solid 1px black;
}.cote2{
background-image:url(
http://img.over-blog-kiwi.com/1/30/51/51/20150324/ob_25cf50_essai5.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);
}
</style></div>

CONSTRUIRE UN CUBE ANIME AVEC DU CODE HTML ET DU CSS.

FACE 1

 

Je ne mets pas d'image mais je déclare le fond en couleur (silver) et je mets un commentaire ( BLOG) pour faire la page d'accueil d'un blog en dernière ligne, entre la fermeture de la balise </style> et la fermeture de la balise </div>

 

<div class="face cote1"><style>.face{
width:300px;
height:300px;
position:absolute;
line-height:300px;
text-align:center;
font-size:80px;
opacity:80;
border:solid 1px black;
}.cote1{
background-color:silver;
z-index:10;
}
</style>BLOG</div>

VOICI LE CODE COMPLET, EN HTML ET CSS ASSEMBLES

 

Pour cela, il convient de reprendre toutes les déclarations: CONTENEUR, PARENT ET LES 6 FACES.

 

Html en bleu

CSS en marron

Ecriture en noir

<div id="conteneur">

<style>

#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%; 
}</style>


<div class="parent">

<style>

.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); } 
}

</style>

<div class="face cote6">

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

}.cote6{
background-image:url(
http://img.over-blog-kiwi.com/1/30/51/51/20150324/ob_1a008b_essai1.JPG
);
transform:translateZ(-300px);
-webkit-transform:translateZ(-300px);
-moz-transform:translateZ(-300px);
-o-transform:translateZ(-300px);
-ms-transform:translateZ(-300px);
}
</style></div>

<div class="face cote5">

<style>.face{
width:300px;
height:300px;
position:absolute;
line-height:300px;
text-align:center;
font-size:80px;
opacity:80;
border:solid 1px black;
}.cote5{
background-image:url(
http://img.over-blog-kiwi.com/1/30/51/51/20150324/ob_cea78e_essai2.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);
}
</style></div>

<div class="face cote4">

<style>.face{
width:300px;
height:300px;
position:absolute;
line-height:300px;
text-align:center;
font-size:80px;
opacity:80;
border:solid 1px black;
}.cote4{
background-image:url(
http://img.over-blog-kiwi.com/1/30/51/51/20150324/ob_4b615d_essai3.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);
}
</style></div>

<div class="face cote3">

<style>.face{
width:300px;
height:300px;
position:absolute;
line-height:300px;
text-align:center;
font-size:80px;
opacity:80;
border:solid 1px black;
}.cote3{
background-image:url(
http://img.over-blog-kiwi.com/1/30/51/51/20150324/ob_7d3b26_essai4.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);
}
</style></div>

<div class="face cote2">

<style>.face{
width:300px;
height:300px;
position:absolute;
line-height:300px;
text-align:center;
font-size:80px;
opacity:80;
border:solid 1px black;
}.cote2{
background-image:url(
http://img.over-blog-kiwi.com/1/30/51/51/20150324/ob_25cf50_essai5.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);
}
</style></div>

<div class="face cote1">

<style>.face{
width:300px;
height:300px;
position:absolute;
line-height:300px;
text-align:center;
font-size:80px;
opacity:80;
border:solid 1px black;
}.cote1{
background-color:silver;
z-index:10;
}
</style>BLOG</div>

RESULTAT

 

 

BLOG

J'ai déclaré toutes mes faces avec l'opacité 80.

 

En diminuant cette valeur pour une ou plusieurs faces, on arrive à une image translucide qui sert de fond et est d'ailleurs déclarée comme telle. Ensuite, rien n'empêche d'écrire sur ces images comme je l'ai fait lorsque j'ai écrit "BLOG"

 

Essayez de déclarer opacity:0,7; pour les faces contenant des images. Vous verrez alors la différence.

commentaires

Haut de page