Propriété transform-origin
La propriété transform-origin définit le point,
par rapport auquel les transformations de l'élément
définies par la propriété transform vont se produire.
Par défaut, ce point est le centre de l'élément,
et, par exemple, la rotation se fera par rapport
à son centre. Cependant, ce comportement peut être modifié
et forcer l'élément à tourner par rapport à
son côté, son coin ou même par rapport à
un point situé en dehors de l'élément.
Syntaxe
sélecteur {
transform-origin: axe-X axe-Y axe-Z;
}
Les valeurs pour les axes Y et Z ne sont pas obligatoires, elles peuvent être omises (elles prendront les valeurs par défaut). Le déplacement du point selon l'axe Z est nécessaire pour les transformations 3D.
Valeurs pour l'axe X
| Valeur | Description |
|---|---|
| Unités CSS | Toute unité de mesure peut être utilisée comme valeur, qui définit le décalage du centre de transformation par rapport au bord gauche de l'élément. Une valeur positive décale le centre de transformation vers la droite (vers l'intérieur de l'élément), et une valeur négative - vers la gauche (vers l'extérieur de l'élément) par rapport au bord gauche de l'élément. |
left |
Point de rotation horizontal sur le bord gauche de l'élément. |
right |
Point de rotation horizontal sur le bord droit de l'élément. |
center |
Point de rotation horizontal au centre de l'élément. |
Valeur par défaut : center.
Valeurs pour l'axe Y
| Valeur | Description |
|---|---|
| Unités CSS | Toute unité de mesure peut être utilisée comme valeur, qui définit le décalage du centre de transformation par rapport au bord supérieur de l'élément. Une valeur positive décale le centre de transformation vers le bas (vers l'intérieur de l'élément), et une valeur négative - vers le haut (vers l'extérieur de l'élément) par rapport au bord supérieur de l'élément. |
top |
Point de rotation vertical sur le bord supérieur de l'élément. |
bottom |
Point de rotation vertical sur le bord inférieur de l'élément. |
center |
Point de rotation vertical au centre de l'élément. |
Valeur par défaut : center.
Valeurs pour l'axe Z
| Valeur | Description |
|---|---|
| Unités CSS | Toute unité de mesure peut être utilisée comme valeur, qui définit le décalage du centre de transformation par rapport au plan de l'élément. Une valeur positive le décale vers nous (hors du plan de l'écran), et une valeur négative l'éloigne de nous. |
Valeur par défaut : 0px.
Exemple
Actuellement, la valeur de la propriété transform-origin n'est pas définie et le bloc tournera par rapport à son centre. Passez la souris sur le bloc pour voir l'effet :
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: center center;
transform: rotate(30deg);
}
:
Exemple
Maintenant, au survol, le bloc tournera par rapport au coin supérieur gauche :
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 0px 0px;
transform: rotate(30deg);
}
:
Exemple
Maintenant, au survol, le bloc tournera par rapport
au coin inférieur droit. Pour cela, il faut placer
le point de transformation à 100% vers la droite
et à 100% vers le bas (on pourrait aussi définir
des px, mais si les dimensions de l'élément changent,
le point de transformation resterait en place,
il est donc préférable d'utiliser %) :
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 100%;
transform: rotate(30deg);
}
:
Exemple
Faisons tourner le bloc par rapport au coin supérieur droit :
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 0%;
transform: rotate(30deg);
}
:
Exemple
Faisons tourner le bloc par rapport au centre du côté gauche.
Pour cela, pour l'axe X, définissons left (le point
de rotation sera à gauche), et pour l'axe Y - center
(le point de rotation sera au centre verticalement) :
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left center;
transform: rotate(30deg);
}
:
Exemple
La propriété peut être utilisée non seulement pour la rotation,
mais aussi pour d'autres transformations. Agrandissons
l'échelle avec scale, en définissant le point
de transformation comme le coin inférieur gauche :
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left bottom;
transform: scale(1.5);
}
:
Exemple
Maintenant, définissons le point de transformation comme le coin supérieur droit :
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: right top;
transform: scale(1.5);
}
:
Exemple
Le point de transformation peut également être défini à l'extérieur de l'élément. Dans l'exemple suivant, lors du survol de la souris sur le bloc rouge, le bloc noir effectuera une rotation par rapport à un point situé à l'extérieur :
<div id="hover"></div>
<div id="elem"></div>
#hover {
border: 1px solid red;
width: 50px;
height: 50px;
}
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
transition: transform 1s;
transform-origin: -100px -100px;
}
#hover:hover + #elem {
transform: rotate(30deg);
}
:
