Table des matièresTransformations 3D

L'écran de votre tablette est en 2D, pour rendre un effet 3D, il faut avoir recours à la perspective. C'est la perspective est ce qui donne l'impression de profondeur.

Entrons dans le vif du Sujet

I Profondeur de la scène

1) Deux façons de conférer de la perspective :

Par la propriété perspective :
Utiliser pour donner de la perspective à plusieurs éléments
Par la fonction perspective() :
Unitiiser pour donner de la perspective élément par élément

Pour définir la même perspective pour un ensemble d'objets, il faut un conteneur servant de contexte.

    <div id="perspective1">
<div class="carreBleu">Bonjour</div>
<div class="carre2 carreBleu">Bonjour</div>
<div class="carre3 carreBleu">Bonjour</div>
<div class="carre4 carreBleu">Bonjour</div>
</div>

 

 

Exemple
Une perspective de 500px;
Bonjour
Bonjour
Bonjour
Bonjour

 

 

#perspective1 {
	position:relative;
	 perspective:500px;
}
.carreBleu {
    padding: 25px;
    position: absolute;
    border: 1px solid black;
    background-color: blue;
    transform: rotateX(35deg);
}
.carre2 {
	left:150px;
}
.carre3 {
	left:300px;
}
.carre4 {
	left:450px;
}
    

Plus la valeur de la perspective est faible, plus l'effet est prononcé. Plus la valeur de perspective est élevée, plus l'effet est faible. La valeur de la perspective est la profondeur du point de fuite.

Exemple
Une perspective de 500px;
Bonjour
Bonjour
Bonjour
Bonjour

 

 

 

Une perspective de 1000px;

Bonjour
Bonjour
Bonjour
Bonjour

 

 

 

Une perspective de 300px;

Bonjour
Bonjour
Bonjour
Bonjour

 

 

2) Position du pont de fuite

C'est par la propriété perspective-origin qu'on place la position du point de fuite. Elle est constituée de 2 valeurs (abscisse, ordonnée) exprimées par des valeurs absolues (pixel ou autres) ou relatives (pourcentage ou autres) ou des mots clefs.

Exemple
Une perspective de 500px;
Bonjour
Bonjour
Bonjour
Bonjour

 

 

#perspective5 {
	position:relative;
	perspective:500px;
	perspective-origin : bottom left ;
}

 

II Les transformations 3D

Les transformations 3D découlent de la propriété transform en 2D, rotation, translation, changement d'échelle. Mais cette fois ces transformations peuvent être opérées suivant les 3 axes x,y,z :

Nous disposons ainsi de nouvelles fonctions de transformations  :

De nouvelles propriétés sont tout de même nécessaires :

 

III Back-visibility et l'effet card flip

 

Exemple

HELLO
CSS

 

<div class="scene">
<div class="flip">
<div class="avant">HELLO</div>
<div class="arriere">CSS</div>
</div>
</div>
.scene{ font: 2em sans-serif; text-align: center; width: 200px; height: 200px; perspective: 600px; margin: 20px auto; } .flip{ transform-style: preserve-3d; } .flip, .flip > div{ width: inherit; height: inherit; transition: transform 1s; } .flip > div{ line-height: 200px; position: absolute; backface-visibility: hidden; } .avant{ background: tomato; } .arriere{ background: deepskyblue; transform: rotateX(180deg); } .scene:hover .flip{ transform: rotateX(180deg); }

Tester l'animation en faisant varier les axes X, Y, Z et les angles 90, 180, 45.

Webographie

Des caroussels sur des cubes et autres polyêdres :
http://www.the-art-of-web.com/css/3d-transforms/
Le cube :
http://3dcube.pixelass.com/
Un cours :
https://openclassrooms.com/courses/utilisez-les-effets-avances-de-css-sur-votre-site/les-transformations-3d-1
Un exemple top :
http://www.cnam-idf.fr/

 

Avez-vous atteint les objectifs ?
Vous devez :

Testez-vous

Essayez-vous à la construction d'un cube, puis animez le.

Voici les 3 premières faces d'un cube

Et voici un premier code qui affiche les faces les unes sous les autres (bloc):

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Cube 3D</title>
<style type="text/css">
.scene {
margin: 50px;
width: 150px;
height: 150px;
}
.cube {
position: relative;
width: inherit;
height: inherit;
}
.cube-face {
width: inherit;
height: inherit;
opacity: 0.8;
}
// faces
.cube-face-front {

}
.cube-face-back {

}
.cube-face-left {

}
.cube-face-right {

}
.cube-face-top {

}
.cube-face-bottom {

}

</style>
</head>
<body>
<!-- https://css-tricks.com/creating-a-3d-cube-image-gallery/ -->
<input type="radio" checked id="radio-front" name="select-face"/>
<input type="radio" id="radio-left" name="select-face"/>
<input type="radio" id="radio-right" name="select-face"/>
<input type="radio" id="radio-top" name="select-face"/>
<input type="radio" id="radio-bottom" name="select-face"/>
<input type="radio" id="radio-back" name="select-face"/>

<div class="scene">
<div class="cube">
<div class="cube-face cube-face-front"><img src="img/hadrien_rannou.png" width="150" height="150"></div>
<div class="cube-face cube-face-back"><img src="img/alexandre_ouzeau.png" width="150" height="150"></div>
<div class="cube-face cube-face-left"><img src="img/janeth_chavez.png" width="150" height="150"></div>
<div class="cube-face cube-face-right"><img src="img/jessye_vergerolle.png" width="150" height="150"></div>
<div class="cube-face cube-face-top"><img src="img/laurent_perez.png" width="150" height="150"></div>
<div class="cube-face cube-face-bottom"><img src="img/gautier_bressanin.png" width="150" height="150"></div>
</div>
</div>
</body>
</html>

1) Mettre un attribut de position avec toutes les div des faces se superposent

2) Placer les 2 transformations nécessaires à la rotation de la face du coté droit du cube, n'oubliez pas de compléter avec

  1. Une translation en z de la demi-largeur du cube
  2. Une rotation de 90 degré suivant un axe à déterminer

3) Poursuivre avec les autres faces du cube

4) Ajouter les mouvements du cubes suivant le bouton radio activé

5) Demander le corrigé cube3d_photo_minimum.html