Type CSS `<transform-function>`

Baseline

Large disponibilit

Cette fonctionnalit est bien tablie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

Voir la compatibilit complte
En savoir plus

Le type de donne CSS <transform-function> reprsente une transformation qui affecte l'apparence d'un lment. Les fonctions de transformation peuvent faire pivoter, redimensionner, dformer ou dplacer un lment en 2D ou 3D. Ce type est utilis dans la proprit transform.

Syntaxe

Le type de donne <transform-function> s'utilise avec l'une des fonctions de transformation listes ci-dessous. Chaque fonction applique une opration gomtrique en 2D ou 3D.

Transformation matricielle

matrix(): Dcrit une matrice de transformation homogne en 2D.
matrix3d(): Dcrit une transformation 3D sous forme de matrice homogne 44.

Perspective

perspective(): Dfinit la distance entre l'utilisateurice et le plan z=0.

Rotation

rotate(): Fait pivoter un lment autour d'un point fixe sur le plan 2D.
rotate3d(): Fait pivoter un lment autour d'un axe fixe dans l'espace 3D.
rotateX(): Fait pivoter un lment autour de l'axe horizontal.
rotateY(): Fait pivoter un lment autour de l'axe vertical.
rotateZ(): Fait pivoter un lment autour de l'axe z.

Mise l'chelle (redimensionnement)

scale(): Met l'chelle un lment sur le plan 2D.
scale3d(): Met l'chelle un lment dans l'espace 3D.
scaleX(): Met l'chelle un lment horizontalement.
scaleY(): Met l'chelle un lment verticalement.
scaleZ(): Met l'chelle un lment selon l'axe z.

Inclinaison (distorsion)

skew(): Incline un lment sur le plan 2D.
skewX(): Incline un lment horizontalement.
skewY(): Incline un lment verticalement.

Translation (dplacement)

translate(): Dplace un lment sur le plan 2D.
translate3d(): Dplace un lment dans l'espace 3D.
translateX(): Dplace un lment horizontalement.
translateY(): Dplace un lment verticalement.
translateZ(): Dplace un lment selon l'axe z.

Description

Divers modles de coordonnes peuvent tre utiliss pour dcrire la taille et la forme d'un lment HTML, ainsi que les transformations qui lui sont appliques. Le plus courant est le systme de coordonnes cartsiennes, bien que les coordonnes homognes soient parfois utilises.

Coordonnes cartsiennes

Dans le systme de coordonnes cartsiennes, un point en deux dimensions est dcrit l'aide de deux valeurs : une coordonne x (abscisse) et une coordonne y (ordonne). Ceci est reprsent par la notation vectorielle (x, y).

[Un plan cartsien montrant l'axe Y ngatif et l'axe X positif partant de l'origine avec trois points P1, P2 et P3 et leurs valeurs X et Y correspondantes]

En CSS (et dans la plupart des graphismes informatiques), l'origine (0, 0) reprsente le coin suprieur gauche de tout lment. Les coordonnes positives sont vers le bas et la droite de l'origine, tandis que les ngatives sont vers le haut et la gauche. Ainsi, un point situ 2 units droite et 5 units en bas sera (2, 5), tandis qu'un point 3 units gauche et 12 units en haut sera (-3, -12).

Fonctions de transformation

Les fonctions de transformation modifient l'apparence d'un lment en manipulant les valeurs de ses coordonnes. Une fonction de transformation linaire est dcrite l'aide d'une matrice 22, comme ceci :

(acbd)\begin{pmatrix} a & c \\ b & d \end{pmatrix}

La fonction est applique un lment par multiplication matricielle. Ainsi, chaque coordonne change en fonction des valeurs de la matrice :

(acbd)(xy)=(ax+cybx+dy)\left( \begin{array}{cc} a & c \\ b & d \end{array} \right) \left( \begin{array}{c} x \\ y \end{array} \right) = \left( \begin{array}{c} ax + cy \\ bx + dy \end{array} \right)

Il est mme possible d'appliquer plusieurs transformations la suite :

(a1c1b1d1)(a2c2b2d2)=(a1a2+c1b2a1c2+c1d2b1a2+d1b2b1c2+d1d2)\left( \begin{array}{cc} a_1 & c_1 \\ b_1 & d_1 \end{array} \right) \left( \begin{array}{cc} a_2 & c_2 \\ b_2 & d_2 \end{array} \right) = \left( \begin{array}{cc} a_1a_2 + c_1b_2 & a_1c_2 + c_1d_2 \\ b_1a_2 + d_1b_2 & b_1c_2 + d_1d_2 \end{array} \right)

Avec cette notation, il est possible de dcrire, et donc de composer, la plupart des transformations courantes : rotations, mises l'chelle ou inclinaisons. (En fait, toutes les transformations qui sont des fonctions linaires peuvent tre dcrites.) Les transformations composes sont effectivement appliques de droite gauche.

Cependant, une transformation majeure n'est pas linaire et doit donc tre traite part avec cette notation : la translation. Le vecteur de translation (tx, ty) doit tre exprim sparment, comme deux paramtres additionnels.

Note : Bien que plus complexes que les coordonnes cartsiennes, les coordonnes homognes en gomtrie projective conduisent des matrices de transformation 33, et peuvent exprimer les translations comme des fonctions linaires.

Note : Les fonctions de transformation sont utilises avec la proprit transform mais pas avec les proprits individuelles de transformation translate, scale et rotate.

Exemples

Comparaison des fonctions de transformation

L'exemple suivant propose un cube 3D cr partir d'lments DOM et de transformations, ainsi qu'un menu droulant permettant de choisir diffrentes fonctions de transformation appliquer au cube, afin de comparer les effets des diffrents types.

Choisissez-en une, et la transformation est applique au cube ; aprs 2 secondes, le cube revient son tat initial. L'tat initial du cube est lgrement inclin avec transform3d(), pour permettre de voir l'effet de toutes les transformations.

HTML

html

<main>
  <section id="example-element">
    <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>
  </section>

  <div class="select-form">
    <label for="transfunction"
      >Slectionnez une fonction de transformation</label
    >
    <select id="transfunction">
      <option selected>Choisissez une fonction</option>
      <option>rotate(360deg)</option>
      <option>rotateX(360deg)</option>
      <option>rotateY(360deg)</option>
      <option>rotateZ(360deg)</option>
      <option>rotate3d(1, 1, 1, 90deg)</option>
      <option>scale(1.5)</option>
      <option>scaleX(1.5)</option>
      <option>scaleY(1.5)</option>
      <option>scaleZ(1.5)</option>
      <option>scale3d(1, 1.5, 1.5)</option>
      <option>skew(17deg, 13deg)</option>
      <option>skewX(17deg)</option>
      <option>skewY(17deg)</option>
      <option>translate(100px, 100px)</option>
      <option>translateX(100px)</option>
      <option>translateY(100px)</option>
      <option>translateZ(100px)</option>
      <option>translate3d(50px, 50px, 50px)</option>
      <option>perspective(200px)</option>
      <option>matrix(1, 2, -1, 1, 80, 80)</option>
      <option>matrix3d(1,0,0,0,0,1,3,0,0,0,1,0,50,100,0,1.1)</option>
    </select>
  </div>
</main>

CSS

css

main {
  width: 400px;
  height: 200px;
  padding: 50px;
  background-image: linear-gradient(135deg, white, cyan, white);
}

#example-element {
  width: 100px;
  height: 100px;
  transform-style: preserve-3d;
  transition: transform 1.5s;
  transform: rotate3d(1, 1, 1, 30deg);
}

.face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  font-size: 60px;
  color: white;
}

.front {
  background: rgb(90 90 90 / 70%);
  transform: translateZ(50px);
}

.back {
  background: rgb(0 210 0 / 70%);
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgb(210 0 0 / 70%);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgb(0 0 210 / 70%);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgb(210 210 0 / 70%);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgb(210 0 210 / 70%);
  transform: rotateX(-90deg) translateZ(50px);
}

.select-form {
  margin-top: 50px;
}

JavaScript

const selectElem = document.querySelector("select");
const example = document.querySelector("#example-element");

selectElem.addEventListener("change", () => {
  if (selectElem.value === "Choose a function") {
    return;
  }
  example.style.transform = `rotate3d(1, 1, 1, 30deg) ${selectElem.value}`;
  setTimeout(() => {
    example.style.transform = "rotate3d(1, 1, 1, 30deg)";
  }, 2000);
});