CSS - Transforms 3D : Apporter de la profondeur à vos designs Web

Bonjour, futurs concepteurs Web ! Aujourd'hui, nous allons entreprendre un voyage passionnant à travers le monde des transformations 3D CSS. En tant que votre professeur de informatique bienveillant du coin, je suis ravi de vous guider à travers ce sujet fascinant. Ne vous inquiétez pas si vous êtes nouveau dans le domaine de la programmation - nous allons commencer par les bases et progresser pas à pas. À la fin de cette leçon, vous serez en mesure de créer des œuvres d'art 3D qui feront ressortir vos sites Web !

Qu'est-ce que les transformations 3D CSS ?

Imaginez que vous tenez un morceau de papier. Dans le monde du design Web, c'est votre page 2D typique. Et si vous pouviez plier ce papier, le tordre ou le faire se dresser ? C'est essentiellement ce que nous permettent de faire les transformations 3D CSS avec nos éléments Web !

Les transformations 3D CSS nous donnent la capacité de manipuler des éléments dans l'espace tridimensionnel. Nous pouvons faire pivoter, translater (déplacer) et redimensionner des éléments le long des axes X, Y et Z. L'axe Z est ce qui ajoute de la profondeur à nos designs, making les éléments paraître plus proches ou plus éloignés.

Préparer le terrain : La propriété Transform

Avant de plonger dans le monde 3D, récapitulons rapidement la propriété transform. C'est la baguette magique que nous utilisons pour appliquer nos transformations 3D.

.element {
transform: function(value);
}

Dans cette syntaxe, function est le type de transformation que nous voulons appliquer, et value est la quantité de transformation que nous voulons appliquer à l'élément.

Les fonctions de transformation

Maintenant, regardons les principales fonctions de transformation 3D que nous avons à notre disposition :

Fonction	Description	Exemple
translate3d(x,y,z)	Déplace un élément dans l'espace 3D	transform: translate3d(10px, 20px, 30px);
translateZ(z)	Déplace un élément le long de l'axe Z	transform: translateZ(30px);
scale3d(x,y,z)	Redimensionne un élément dans l'espace 3D	transform: scale3d(1.5, 1.5, 2);
scaleZ(z)	Redimensionne un élément le long de l'axe Z	transform: scaleZ(2);
rotate3d(x,y,z,angle)	Fait pivoter un élément dans l'espace 3D	transform: rotate3d(1, 1, 1, 45deg);
rotateX(angle)	Fait pivoter un élément autour de l'axe X	transform: rotateX(45deg);
rotateY(angle)	Fait pivoter un élément autour de l'axe Y	transform: rotateY(45deg);
rotateZ(angle)	Fait pivoter un élément autour de l'axe Z	transform: rotateZ(45deg);
perspective(n)	Définit la vue perspective	transform: perspective(1000px);

Ne vous inquiétez pas si cela semble accablant - nous allons détailler chacun d'eux avec des exemples !

Commençons les transformations !

Translation en 3D

Commençons par déplacer des éléments dans l'espace 3D en utilisant translate3d :

.box {
width: 100px;
height: 100px;
background-color: #3498db;
transform: translate3d(50px, 30px, 20px);
}

Dans cet exemple, notre boîte se déplace de 50px vers la droite, de 30px vers le bas, et de 20px vers le spectateur. C'est comme si la boîte flottait hors de l'écran !

Redimensionnement en 3D

Maintenant, faisons grossir ou rétrécir notre boîte en 3D :

.box {
width: 100px;
height: 100px;
background-color: #e74c3c;
transform: scale3d(1.5, 1.5, 2);
}

Cette transformation rend notre boîte 1,5 fois plus grande en largeur et en hauteur, et le double de profondeur.

Rotation en 3D

Faire pivoter des éléments en 3D peut créer des effets vraiment sympas :

.box {
width: 100px;
height: 100px;
background-color: #2ecc71;
transform: rotateX(45deg) rotateY(30deg) rotateZ(60deg);
}

Cette boîte danse un peu, pivotant de 45 degrés autour de l'axe X, de 30 degrés autour de l'axe Y, et de 60 degrés autour de l'axe Z !

L'importance de la perspective

Maintenant, c'est là que les choses deviennent vraiment intéressantes. Pour véritablement apprécier les transformations 3D, nous devons ajouter une perspective. Pensez à la perspective comme la distance entre le spectateur et l'objet.

.container {
perspective: 1000px;
}

.box {
width: 100px;
height: 100px;
background-color: #9b59b6;
transform: rotateY(45deg);
}

Dans cet exemple, nous avons ajouté une perspective au conteneur. Maintenant, lorsque nous pivotons la boîte, elle paraît plus tridimensionnelle !

Mettre tout ensemble : Un cube 3D

Combinons tout ce que nous avons appris pour créer un cube 3D :

<div class="scene">
<div class="cube">
<div class="face front">Front</div>
<div class="face back">Back</div>
<div class="face right">Right</div>
<div class="face left">Left</div>
<div class="face top">Top</div>
<div class="face bottom">Bottom</div>
</div>
</div>

.scene {
width: 200px;
height: 200px;
perspective: 600px;
}

.cube {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transform: translateZ(-100px);
transition: transform 1s;
}

.face {
position: absolute;
width: 200px;
height: 200px;
border: 2px solid black;
line-height: 200px;
font-size: 40px;
font-weight: bold;
color: white;
text-align: center;
}

.front  { background: rgba(255,0,0,0.7);   transform: rotateY(  0deg) translateZ(100px); }
.right  { background: rgba(0,255,0,0.7);   transform: rotateY( 90deg) translateZ(100px); }
.back   { background: rgba(0,0,255,0.7);   transform: rotateY(180deg) translateZ(100px); }
.left   { background: rgba(255,255,0,0.7); transform: rotateY(-90deg) translateZ(100px); }
.top    { background: rgba(255,0,255,0.7); transform: rotateX( 90deg) translateZ(100px); }
.bottom { background: rgba(0,255,255,0.7); transform: rotateX(-90deg) translateZ(100px); }

.cube:hover {
transform: translateZ(-100px) rotateX(-90deg) rotateY(-45deg);
}

Ce code crée un cube coloré 3D qui pivote lorsque vous le survolez. Pretty cool, non ?

Conclusion

Et voilà, amis ! Nous avons parcouru le monde passionnant des transformations 3D CSS. De simples translations à la création d'un cube 3D complet, vous avez maintenant le pouvoir d'ajouter de la profondeur et de la dimension à vos designs Web.

N'oubliez pas, la clé pour maîtriser les transformations 3D est la pratique. N'ayez pas peur d'expérimenter avec différents valeurs et combinaisons. Qui sait ? Vous pourriez créer la prochaine grande chose dans le design Web !

En conclusion, je suis rappelé par une citation du célèbre architecte Frank Lloyd Wright : "L'espace est le souffle de l'art." Avec les transformations 3D CSS, vous avez maintenant les outils pour insuffler la vie dans vos espaces Web. Alors, à vous de jouer et créez des expériences 3D incroyables !

Bonne programmation, et puissent vos designs Web toujours avoir de la profondeur !

Credits: Image by storyset