We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

En modifiant l'espace des coordonnées, les transformations CSS permettent de changer la position d'un contenu affecté sans perturber le flux normal. Elles sont implémentées en utilisant un ensemble de propriétés CSS qui vous permettre d'appliquer des transformations affines aux éléments HTML. Ces transformations incluent la rotation, l'inclinaison et la translation à la fois dans le plan ou dans un espace 3D.

Propriétés des transformations CSS

Deux propriétés majeures sont utilisées pour définir les transformations CSS : transform et transform-origin.

transform-origin
Spécifie la position de l'origine. Par défaut, celle-ci est dans le coin supérieur gauche de l'élément et peut être déplacée. Elle est utilisée par de nombreuses transformations, comme les rotations, les homothéties ou l'inclinaison, qui nécessitent un point spécifique pour paramètre.
transform
Spécifie la transformation à appliquer à l'élément. C'est une liste de transformations séparée par des espaces, qui sont appliquées les unes après les autres, comme requis par l'opération de composition. Les transformations qui sont composées entre elles sont appliquées dans l'ordre, de droite à gauche.

Exemples

Voici une version originale du logo MDN :

MDN Logo

Rotation

Ici, on place le logo dans une iframe et on le tourne de 90 degrés depuis le coin inférieur gauche :

<img style="transform: rotate(90deg);
            transform-origin: bottom left;" 
     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">

Distorsion et translation

Ici, on applique une distorsion de 10 degrés et on translate l'image de 150 pixels sur l'axe des abscisses :

<img style="transform: skewx(10deg) translatex(150px);
            transform-origin: bottom left;"
     src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png">

Propriétés CSS spécifiques à la 3D

Réaliser des transformations CSS dans l'espace est un petit peu plus complexe. Il faut d'abord définir l'espace 3D en lui donnant une perspective, puis il faut configurer le comportement des éléments 2D dans cet espace.

Définir une perspective

Le premier élément à définir est la perspective. La perspective est ce qui donne l'impression de troisième dimension. Plus les éléments sont loin de l'observateur, plus ils seront petits.

Trois cubes

HTML
<table>
  <tbody>
    <tr>
      <th><code>perspective: 250px;</code>
      </th>
      <th><code>perspective: 350px;</code>
      </th>
    </tr>
    <tr>
      <td>
        <div class="container">
          <div class="cube pers250">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
      </td>
      <td>
        <div class="container">
          <div class="cube pers350">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <th><code>perspective: 500px;</code>
      </th>
      <th><code>perspective: 650px;</code>
      </th>
    </tr>
    <tr>
      <td>
        <div class="container">
          <div class="cube pers500">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
        </div>
      </td>
      <td>
        <div class="container">
          <div class="cube pers650">
            <div class="face front">1</div>
            <div class="face back">2</div>
            <div class="face right">3</div>
            <div class="face left">4</div>
            <div class="face top">5</div>
            <div class="face bottom">6</div>
          </div>
      </td>
    </tr>
  </tbody>
</table>
CSS
/* Des classes pour les différentes valeurs */
.pers250 {
    perspective: 250px;
}
.pers350 {
    perspective: 350px;
}
.pers500 {
    perspective: 500px;
}

/* On définit le div pour le conteneur, */
/* le cube, ainsi qu'une face générique */
 .container {
   width: 200px;
   height: 200px;
   margin: 75px 0 0 75px;
   border: none;
}

.cube {
   width: 100%;
   height: 100%;
   backface-visibility: visible;
   perspective-origin: 150% 150%;
   transform-style: preserve-3d;
}

.face {
   display: block;
   position: absolute;
   width: 100px;
   height: 100px;
   border: none;
   line-height: 100px;
   font-family: sans-serif;
   font-size: 60px;
   color: white;
   text-align: center;
}

/* On définit chaque face en fonction de sa direction */
 .front {
   background: rgba(0, 0, 0, 0.3);
   transform: translateZ(50px);
}

.back {
   background: rgba(0, 255, 0, 1);
   color: black;
   transform: rotateY(180deg) translateZ(50px);
}

.right {
   background: rgba(196, 0, 0, 0.7);
   transform: rotateY(90deg) translateZ(50px);
}

.left {
   background: rgba(0, 0, 196, 0.7);
   transform: rotateY(-90deg) translateZ(50px);
}

.top {
   background: rgba(196, 196, 0, 0.7);
   transform: rotateX(90deg) translateZ(50px);
}

.bottom {
   background: rgba(196, 0, 196, 0.7);
   transform: rotateX(-90deg) translateZ(50px);
}

/* On améliore légèrement le tableau */
th, p, td {
   background-color: #EEEEEE;
   padding: 10px;
   font-family: sans-serif;
   text-align: left;
}
Résultat

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, fscholz, teoli, Delapouite, FredB, BenoitL
Dernière mise à jour par : SphinxKnight,