Cube 3D en CSS3, avec image et interaction

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