CSS
Transformations 2D

Syntaxe

• Rotation Transformer
• transformer: tourner (<angle>)
• Traduire Transformer
• transformer: translate (<longueur ou pourcentage> [, <longueur ou pourcentage>]?)
• transformer: translateX (<longueur ou pourcentage>)
• transformer: translateY (<longueur ou pourcentage>)
• Transformer en biais
• transform: skew (<angle> [, <angle>]?)
• transformer: skewX (<angle>)
• transformer: skewY (<angle>)
• Transformation d'échelle
• transform: scale (<facteur d'échelle> [, <facteur d'échelle>]?)
• transformer: scaleX (<facteur d'échelle>)
• transformer: scaleY (<facteur d'échelle>)
• Transformation de la matrice
• transform: matrix (<nombre> [, <nombre>] {5,5})

Paramètres

Remarques

-webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
        transform: rotate(45deg);

Tourner

HTML

<div class="rotate"></div>

CSS

.rotate {
    width: 100px;
    height: 100px;
    background: teal;
    transform: rotate(45deg);
}

Cet exemple fera pivoter le div de 45 degrés dans le sens des aiguilles d'une montre. Le centre de rotation se trouve au centre du div, à 50% de la gauche et à 50% du haut. Vous pouvez modifier le centre de rotation en définissant la propriété d' transform-origin .

transform-origin: 100% 50%;

L'exemple ci-dessus définira le centre de rotation au milieu de l'extrémité droite.

Échelle

HTML

<div class="scale"></div>

CSS

.scale {
    width: 100px;
    height: 100px;
    background: teal;
    transform: scale(0.5, 1.3);
}

Cet exemple mettra à l'échelle le div sur 100px * 0.5 = 50px sur l'axe des abscisses et sur 100px * 1.3 = 130px sur l'axe des 100px * 1.3 = 130px .

Le centre de la transformation se situe au centre du div, à 50% de la gauche et à 50% du haut.

Traduire

HTML

<div class="translate"></div>

CSS

.translate {
    width: 100px;
    height: 100px;
    background: teal;
    transform: translate(200px, 50%);
}

Cet exemple déplace le div de 200px sur l'axe des x et de 100px * 50% = 50px sur l'axe des y.

Vous pouvez également spécifier des traductions sur un seul axe.

Sur l'axe des X:

.translate {
    transform: translateX(200px);
}

Sur l'axe des Y:

.translate {
    transform: translateY(50%);
}

Fausser

HTML

<div class="skew"></div>

CSS

.skew {
    width: 100px;
    height: 100px;
    background: teal;
    transform: skew(20deg, -30deg);
}

Cet exemple incline le div de 20 degrés sur l’axe des X et de - 30 degrés sur l’axe des Y.
Le centre de la transformation se situe au centre du div, à 50% de la gauche et à 50% du haut.

Voir le résultat ici .

Transformations multiples

Plusieurs transformations peuvent être appliquées à un élément d'une propriété comme ceci:

transform: rotate(15deg) translateX(200px);

Cela fera pivoter l'élément de 15 degrés dans le sens des aiguilles d'une montre et le traduira ensuite à 200px vers la droite.

Dans les transformations chaînées, le système de coordonnées se déplace avec l'élément . Cela signifie que la traduction ne sera pas horizontale, mais que sur un axe, pivotez de 15 degrés dans le sens des aiguilles d'une montre, comme indiqué dans l'image suivante:

Changer l'ordre des transformations changera la sortie. Le premier exemple sera différent de

transform: translateX(200px) rotate(15deg);

<div class="transform"></div>

.transform {
  transform: rotate(15deg) translateX(200px);
}

Comme montré dans cette image:

Transformer l'origine

Les transformations sont effectuées par rapport à un point défini par la propriété transform-origin .

La propriété prend 2 valeurs: transform-origin: XY;

Dans l'exemple suivant, la première div ( .tl ) est .tl dans le coin supérieur gauche avec l' transform-origin: 0 0; et le second ( .tr ) est transformé autour de son coin supérieur droit avec l’ transform-origin: 100% 0 . La rotation est appliquée en vol stationnaire :

HTML:

<div class="transform originl"></div>
<div class="transform origin2"></div>

CSS:

.transform {
    display: inline-block;
    width: 200px;
    height: 100px;
    background: teal;
    transition: transform 1s;
}

.origin1 {
    transform-origin: 0 0;
}

.origin2 {
    transform-origin: 100% 0;
}

.transform:hover {
    transform: rotate(30deg);
}

La valeur par défaut de la propriété d'origine de transformation est 50% 50% ce qui correspond au centre de l'élément.