Comment utiliser les transformations 3D?

Les transformations 3D sont basées sur la même propriété que les transformations 2D, soit la propriété transform.
Mais, pour activer l'espace 3D, on a besoin d’une autre nouvelle propriété qui est la propriété perspective.
Dans ce chapitre, vous apprendrez :
La propriété perspective. Et
Les méthodes 3D transform suivantes :
La méthode rotateX()
La méthode rotateY()

Somaire

Quelle difference entre la 2D et la 3D ?

CSS3 cours tutorial

Avant 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 :

Sélectionner le code

	

transform : perspective ( 600px );

2 – Ou en tant que propriété comme suit :

Sélectionner le code

            

perspective : 600px ;

astuce 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

Sélectionner 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

Sélectionner 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 chrome

-webkit-

fire fox internet explorateur opera

safari

-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

Sélectionner 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

Sélectionner 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
Par carabde 10 mars 2014

chapitre précédent sommaire chapitre suivant