Manipulation de fichiers écriture
Quelle difference entre la 2D et la 3D ?
CSS3 cours tutorialAvant les l’introduction des transformations 3D par la CSS3 , pour afficher une page Web nous utilisions le 2D donc deux axes :
Axe des X positif vers la droite de l’écran
Axe des Y positif vers le pas de l’écran
Après l’introduction de la transformation 3D dans le CSS3, nous pouvons utiliser un troisième axe
Axe des Z positif vers l’utilisateur qui regarde la page Web
Qu’est ce que la perspective ?
La perspective joue un rôle important dans le rendu visuel des éléments en 3D. C’est grâce à la perspective que vous aurez l’impression que les éléments sortent de l’écran.
La perspective représente la distance entre la caméra et l’élément HTML sur lequel cette perspective est appliquée:
Plus la perspective est importante, plus vous êtes éloignés, et donc, plus l’objet paraît plat.
Au contraire, plus la perspective est faible, et plus l’élément paraît en relief.
Comment utiliser la perspective ?
La perspective peut être appliqué de deux façons:
En tant que méthode (fonction) de la propriété transform comme le montre l’exemple suivant :
Exemple : Copier le code
transform : perspective ( 600px );
2 – Ou en tant que propriété comme suit :
Exemple : Copier le code
perspective : 600px ;
Astuce : Pour être sure que la perspective fonctionne dans tous les navigateur principaux utilisez les préfixes : -webkit-perspective , -moz-perspective, –o-perspective etc. …
Exeemple
Exemple : Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Perspective : Examples</title>
<style>
.conteneur {
width: 200px;
height: 200px;
border: 1px solid #CCC;
margin: 0 auto 40px;
}
.box {
width: 100%;
height: 100%;
}
#boite1 .box {
background-color: #ff0;
-webkit-transform: perspective( 600px ) rotateY( 45deg );
-o-transform: perspective( 600px ) rotateY( 45deg );
transform: perspective( 600px ) rotateY( 45deg );
}
#boite2 {
-webkit-perspective: 600px;
-o-perspective: 600px;
perspective: 600px;
}
#boite2 .box {
background-color: #0ff;
-webkit-transform: rotateY( 45deg );
-o-transform: rotateY( 45deg );
transform: rotateY( 45deg );
}
h2{margin:10px;padding:10px;}
</style>
</head>
<body>
<h1>Perspective </h1>
<section id="boite1" class="conteneur">
<div class="box boite1"><h2>Méthode perspective</h2></div>
</section>
<section id="boite2" class="conteneur">
<div class="box"><h2>Propriété perspective</h2></div>
</section>
</body>
</html>
Les deux formats déclenchent toutes les deux un espace 3D, mais il y a une différence.
La forme méthode de la propriété transforme est pratique pour appliquer directement une transformation 3D sur un seul élément (l'exemple précédent).
Mais lorsqu'elle est utilisé sur plusieurs éléments, les éléments transformés ne s'alignent pas comme prévu.
Si vous utilisez la même transformation à travers des éléments avec des positions différentes, chaque élément aura son propre point de fuite. Pour couriger cela, utilisez plutôt la forme propriété perspective sur un élément parent, de cette façon les enfants peut partagent le même espace 3D.
Exemple
Exemple : Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Perspective : Examples</title>
<style>
.container {
width: 300px;
height: 200px;
border: 1px solid #CCC;
margin: 0 auto 40px;
}
.container figure {
display: block;
width: 50px;
height: 50px;
float: left;
margin: 5px;
}
#red figure {
background: #fd5555;
-webkit-transform: perspective( 200px ) rotateY( 45deg );
-moz-transform: perspective( 200px ) rotateY( 45deg );
-o-transform: perspective( 200px ) rotateY( 45deg );
transform: perspective( 200px ) rotateY( 45deg );
}
#blue {
-webkit-perspective: 200px;
-moz-perspective: 200px;
-o-perspective: 200px;
perspective: 200px;
}
#blue figure {
background: #0099ff;
-webkit-transform: rotateY( 45deg );
-moz-transform: rotateY( 45deg );
-o-transform: rotateY( 45deg );
transform: rotateY( 45deg );
}
</style>
</head>
<body>
<h1>Perspective </h1>
<section id="red" class="container">
<h3>Méthode appliquée à chaque élément enfant</h3>
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
</section>
<section id="blue" class="container">
<h3>Propriété appliquée à l'élément parent</h3>
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
<figure></figure>
</section>
</body>
</html>
Les méthodes 3D transform
Prise en charge des navigateurs
| Propriété | Appui de navigateur | ||||
|---|---|---|---|---|---|
| transformer |
-webkit-
|
|
|
|
-webkit-
|
Internet Explorer 10 et Firefox prend en charge les transformations 3D.
Chrome et Safari nécessite le préfixe - webkit-.
Opera ne supporte pas encore les transformations 3D (il supporte
2D transforme seulement).
La méthode rotateX()
Avec la méthode rotateX(), fait pivoter l'élément autour de son axe x à un angle donné en paramètre.
Exemple
Exemple : Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Perspective : Examples</title>
<style>
div
{
width:100px;
height:75px;
background-color:#ff0;
border:1px solid black;
}
div#div2
{
transform:rotateX(45deg);
-webkit-transform:rotateX(45deg); /* Safari et Chrome */
}
</style>
</head>
<body>
<div>Voici un div normal.</div>
<div id="div2">Voici un dive avec rotateX.</div>
</body>
</html>
La méthode rotateY()
Avec la méthode rotateY(),fait pivoter l'élément autour de son axe y à un angle donné en paramètre.
Exemple
Exemple : Copier le code
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>Perspective : Examples</title>
<style>
div
{
width:100px;
height:75px;
background-color:#ff0;
border:1px solid black;
}
div#div2
{
transform:rotateX(45deg);
-webkit-transform:rotateY(45deg); /* Safari et Chrome */
}
</style>
</head>
<body>
<div>Voici un div normal.</div>
<div id="div2">Voici un dive avec rotateY.</div>
</body>
</html>
Les propriétés transform
Le tableau suivant répertorie toutes les propriétés de transformation :
| Propriété | Description |
|---|---|
| transform | Applique une transformation 2D ou 3D à un élément |
| transform-origin | Permet de modifier l'origine pour les transformations d'un élément. |
| transform-style | Détermine si un enfant d'un élément est positionné dans un espace en 3D ou non |
| perspective | Définit une vue perspective pour des transformations 3D |
| backface-visibility | Détermine si la face arrière d'un élément doit être visible ou non lorsqu'elle fait face à l'utilisateur |
Méthodes Transform 3D
| Fonction | Description |
|---|---|
| matrix3d
(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) |
Définit une transformation 3D, utilisant une matrice 4x4 donc 16 valeurs |
| translate3d(x,y,z) | Définit une translation 3D |
| translateX(x) | Définit une translation 3D, le long de l’axe X |
| translateY(y) | Définit une translation 3D, le long de l’axe Y |
| translateZ(z) | Définit une translation 3D, le long de l’axe Z |
| scale3d(x,y,z) | Défins une transformation 3D de mise à l’échelle |
| scaleX(x) | Définit une transformation 3D de mise à l’échelle suivant l’axe X |
| scaleY(y) | Définit une transformation 3D de mise à l’échelle suivant l’axe Y |
| scaleZ(z) | Définit une transformation 3D de mise à l’échelle suivant l’axe Z |
| rotate3d(x,y,z,angle) | Définit une rotation 3D pas encor prise en charge par les navigateurs |
| rotateX(angle) | Définit une rotation 3D auteur de l’axe X |
| rotateY(angle) | Définit une rotation 3D auteur de l’axe Y |
| rotateZ(angle) | Définit une rotation 3D auteur de l’axe Z |
| perspective(n) | Définit une vue perspective pour des transformations 3D |
chapitre précédent chapitre suivant