Cube 3D en CSS3,

avec image et interaction

Dechamps Aurore
Korfed Elmahdi
Massa Florian
Moïse Yoann
 Plan

I> Présentation du sujet

II> Comment créer un cube ?

III> Cas pratique - animation du Cube

I> Présentation du sujet : cube

- 1 centre
- 6 faces
- 3 axes (x,y,z)
I> Présentation du sujet : outils utilisés
II> Comment créer un cube ? (HTML: 1/1)

● Utilisation de la balise <div>

○ 1 <div> contiendra le cube
○ 6 <div> contiendront les faces du cube

● Utilisation de la balise <img>

○ 1<img> par face du cube
II> Comment créer un cube ? (CSS: 1/4)

● Utilisation de la propriété CSS transform

● Translation/Déplacement du cube
-> translateX, translateY, translateZ
-> unité utilisée = pixels px

Exemple:
- webkit-transform: translateZ(100px);
II> Comment créer un cube ? (CSS: 2/4)

● Effet de rotation
-webkit-transform: rotateY(90deg);

-> rotateX, rotateY, rotateZ

-> rotation exprimée par un angle en degrés
-> sens trigonométrique
II> Comment créer un cube ? (CSS: 3/4)

● Relief donné à la 3D
- webkit-perspective:2800px;

● Origine de la perspective
- webkit-perspective-origin:50% 50%;
II> Comment créer un cube ? (CSS: 4/4)

● Forcer les éléments imbriqués à subir les

transformations 3D lorsque le parent est
transformé
- webkit-transform-style: preserve-3d;
III> Cas pratique : animation du cube

● Objectifs :
-> mise en mouvement du Cube
-> exploser le cube lors du passage de la souris

● Aides :
- :hover
- webkit-animation
- @-webkit-keyframes
III> Cas pratique : animation du cube

● Démonstration
III> Cas pratique : base html

<div class="container">
<div id="cube">
<div id="front"><img src="img1.jpg"/></div>
<div id="back"><img src='./img2.jpg' /></div>
<div id="right"><img src='./img3.jpg' /></div>
<div id="left"><img src='./img4.jpg' /></div>
<div id="up"><img src='./img5.jpg' /></div>
<div id="bottom"><img src='./img6.jpg' /></div>
</div>
</div>
III> Cas pratique : base css (1/2)
.container{
position: absolute;
top:20%;
left:35%;
-webkit-perspective:2800px;
-webkit-perspective-origin:50% 50%;
}

#cube{
width: 400px;
height: 400px;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX(-25deg) rotateY(35deg);
}
III> Cas pratique : base css (2/2)

#cube div{
position:absolute;
width: 200px; /* Taille de chaque face */
height: 200px;
opacity:0.8;
}

#front{ -webkit-transform: translateZ(-100px); }

#back{ -webkit-transform: translateZ(100px); }
#left{ -webkit-transform: rotateY(-90deg) translateZ(100px); }
#right{ -webkit-transform: rotateY(90deg) translateZ(100px); }
#up{ -webkit-transform: rotateX(-90deg) translateZ(100px); }
#bottom{ -webkit-transform: rotateX(90deg) translateZ(100px); }
Conclusion

● De nouvelles possibilités dans le développement web

● Quelques navigateurs compatibles
Merci de votre attention