Le version 3 de CSS nous a apporté son lot de nouveauté ; parmi les plus connues et plus utilisées on peut citer « Corner radius » ou encore les dégradés mais une nouvelle propriété très intéressante va vous permettre une encore plus grande liberté : la propriété « transform ».
De la 3D en CSS ?
Je n’irai pas jusqu’à dire qu’il s’agit de 3D mais plutot d’effet 3D au même titre que nous pouvons réaliser ces effets avec un logiciel de graphisme.
Nous verrons dans cet article comment réaliser un cube en effet 3D.
I – Introduction
Avant toute chose, il est nécessaire de prendre en compte la comptabilité. L’utilisation de la propriété CSS 3D transform n’est compatible qu’avec Firefox 3.5+ [-moz-transform] (documentation) et Safari 3.2+[-webkit-transform](documentation).
Travaillant essentiellement sur Firefox, je ne m'aventurerai pas dans les détails de Safari mais il n'y a pas d'énormes différences...
1°) Prérequis
- Connaissances HTML / CSS
- Vous vous souvenez de vos cours de géométrie ?
- Un éditeur CSS / HTL
2°) Un peu de théorie...
http://www.w3.org/TR/css3-3d-transforms/
Rotation d'un objet : -moz-transform: rotate(angle);
Exemple :
-moz-transform: rotate(30);
Redimensionnement 2D axe X et Y d'un objet : -moz-transform: scale(sx[, sy]);
- Figure 1.2.1 - Propritét CSS Transform rotate - Rotation d'un div de 30°
Si [sy] n'est pas renseigné, il aura la même valeur de [sx]
Modifier la perspective : -moz-transform: skew(ax,[ay]);
Permet de modifier l'axe de perspective, vous pouvez également utilsier skewX(deg) et skewY(deg) pour les utiliser indépendament.
Exemple : -moz-transform: skewY(30deg);
Parlons maintenant de la propriété "transform:matrix", il faut comprendre dans Matrix la traduction "matrice". Nous avons une forme géométrique qui est constituée de différents points [a,b,c,d] que nous pouvons manipuler.
-moz-transform: matrix(a, c, b, d, tx, ty) /* Where a, b, c, d construit la transformation de la matrice ┌ ┐ │ a b │ │ c d │ └ ┘ and tx, ty are the translate values. */
Quelques exemples :
.matrix {
width: 200px;
height: 100px;
background: #f5f5f5;
-moz-transform:matrix(1,0,0.6,1,15em,0);
}
Rendu (figure 1.2.3)
Figure 1.2.3 - Rendu de la proprité transform:matrix
Exemple 2 - Retournement d'objet
.matrix {
width: 200px;
height: 100px;
background: #ff8000;
-moz-transform:matrix(-1,0,1.2,1,20em,12em);
}
Résultat (figure 1.2.4) :
Figure 1.2.4 - Résultat transform:matrix - retournement d'objet
Exemple 3 : Reflexion
-moz-transform: matrix(1, 0, 0, -1, 0, 0);
Figure 1.2.5 - Exemple transform:matrix - Reflexion
Autres exemples (non-shématisés) :
Rotation 90° sur la gauche : -moz-transform:matrix(0,-1,1,0,0,0);
II - Création d'un cube 3D
1°) Code HTML de base
Il faut tout d'abord créer 3 blocs qui nous permettrons de simuler notre cube. Ces 3 blocs seront encadrés par un div global.
Code HTML du cube
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Tutoriel CSS 3D</title> <base href="http://localhost/tutos/tuts/css-3D/"/> <link href="style.css" rel="stylesheet" type="text/css"/> </head> <body> <div id="cube"> <div id="topSide"><div>Content</div></div> <div id="leftSide"><div>Content</div></div> <div id="rightSide"><div>Content</div></div> </div> </body> </html>
J'ai également créé un fichier css qui nous permettra de mettre en forme notre cube 3D. Dans un premier temps, j'ai simplement dissocier les blocs.
Code CSS fichier style.css
#cube {
position: relative;
top: 200px;
margin:0 0 230px 0;
}
#cube .cubeSide{
height:200px;
width:200px;
}
#topSide{
background:#ff8000;
}
#leftSide{ background:#0080c0;}
#rightSide{background:#00ff40;}
Voici le résultat obtenu (figure 2.1.1) :
Figure 2.1.1 -CSS Transform - Cube 3D Etape 1
Maintenant, passons à des choses un peu plus sympa, nous allons appliquer notre propriété "transform" à notre cube :
.leftFace {
background: #ff8000;
-moz-transform: skewY(30deg);
}
.rightFace {
background: #800080;
-moz-transform: skewY(-30deg);
}
Nous avons appliqué ici une propriété "transform:skewY" permettant d'incliner nos div sur leurs axes Y donnant ainsi un effet de perspective.
Figure 2.1.2 - Transformation perspective sur l'axe Y - [transform:skewX(val)
Positionner les DIV : Nous devons appliquer un positionnement "absolute" à l'ensemble de nos blocs afin que ceux-ci puissent êtres dissocié et placés indépendament (figure 2.1.3) .
Code CSS : Positionnement des DIV
.topFace, .leftFace, .rightFace {
position: absolute;
}
Figure 2.1.3 - Positionnement absolute des blocs
Ensuite, nous allons positionner notre bloc right (figure 2.1.4). Il s'agit ici de décaller notre bloc de 200px sur la droite et vers le bas.
.rightFace {
background: #800080;
-moz-transform: skewY(-30deg);
top: 200px;
left: 200px;
}
Figure 2.1.4 - Positionnement du bloc "rightSide"
Intéressons nous maintenant à la partie haute, c'est à dire le DIV topSide. C'est la partie la plus compliquée...
.topFace {
-moz-transform: rotate(60deg);
left: 100px;
top: 42px;
}
.topFace div {
background: #0080c0;
-moz-transform: skewY(-30deg) scaleY(1.16);
}
Quelques explications : Pour donner cet effet, il est nécessaire de pivoter notre face (-moz-transform: rotate(60deg);), puis nous appliquons une perspective et un redimenssionnement.
Figure 2.1.5 - CSS Effet 3D - Cube final
Avec un peu d'habillage, voici le résultat final :
Figure 2.1.5 - CSS Effet 3D - Cube Final
