transform-origin |
Transforme l'origine |
---|---|
CSS3 |
Syntaxe
transform-origin: x-axis y-axis z-axis|inherit|initial; |
Paramètres
Paramètre | Description | |
---|---|---|
x-axis | Ce paramètre de propriété permet d'indiquer où la vue doit placer son axe des X : | |
Valeur | Description | |
distance | Cet attribut permet d'indiquer que la position est calculé en pixels. | |
pourcentage% | Cet attribut permet d'indiquer que la position est calculé en pourcentage. | |
center | Cet attribut permet d'indiquer qu'il faut le centrer à milieu. | |
inherit | Cet attribut permet d'indiquer qu'il hérite des propriétés de la balise parente. | |
initial | Cet attribut permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété. | |
left | Cet attribut permet d'indiquer qu'il faut le centrer à gauche. | |
right | Cet attribut permet d'indiquer qu'il faut le centrer à droite. | |
y-axis | Ce paramètre de propriété permet d'indiquer où la vue doit placer son axe des Y : | |
Valeur | Description | |
distance | Cet attribut permet d'indiquer que la position est calculé en pixels. | |
pourcentage% | Cet attribut permet d'indiquer que la position est calculé en pourcentage. | |
bottom | Cet attribut permet d'indiquer qu'il faut le centrer en bas. | |
center | Cet attribut permet d'indiquer qu'il faut le centrer à milieu. | |
inherit | Cet attribut permet d'indiquer qu'il hérite des propriétés de la balise parente. | |
initial | Cet attribut permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété. | |
top | Cet attribut permet d'indiquer qu'il faut le centrer en haut. | |
z-axis | Ce paramètre de propriété permet d'indiquer où la vue doit placer son axe des Z (si la transformation est en 3 dimensions) : | |
Valeur | Description | |
distance | Ce paramètre permet d'indiquer que la position est calculé en pixels. | |
inherit | Ce paramètre permet d'indiquer qu'il hérite des propriétés de la balise parente. | |
initial | Ce paramètre permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété. |
Description
Cette propriété permet de changer la position des éléments transformées.
Remarques
- Fonction principale : La propriété transform-origin définit le point d'origine à partir duquel une transformation CSS (transform) s'applique. Par défaut, ce point est centré sur l'élément (50% 50%), mais il peut être personnalisé pour obtenir des effets de transformation plus spécifiques, comme une rotation autour d'un coin ou d'un bord.
- Syntaxe : transform-origin accepte jusqu'à trois valeurs : deux pour la position horizontale et verticale, et une optionnelle pour la profondeur (dans le cas des transformations 3D). Les unités peuvent être des pourcentages (50%), des pixels (px), ou des mots-clés comme left, center, ou top.
- Impact visuel : Changer l'origine de transformation peut radicalement modifier l'apparence de la transformation. Par exemple, une rotation autour du coin supérieur gauche (avec transform-origin: 0 0;) diffère énormément d'une rotation autour du centre.
- Valeurs par défaut : Si transform-origin n'est pas défini, la valeur par défaut est 50% 50% 0. Cela signifie que les transformations se produisent à partir du centre de l'élément, sans décalage sur l'axe Z.
- Utilisation dans les animations : Lors d'animations CSS utilisant des transformations, transform-origin peut être modifié pour créer des effets dynamiques. Par exemple, un élément qui "bascule" sur un bord utilise généralement un point d'origine positionné à ce bord.
- Support 3D : Avec les transformations 3D, le troisième paramètre de transform-origin permet de définir une origine sur l'axe Z. Cela ajoute une profondeur supplémentaire, essentielle pour des effets 3D réalistes comme les bascules ou rotations dans l'espace.
- Performance : Bien que la propriété ne soit pas coûteuse en soi, la combinaison de transform-origin avec des transformations complexes (comme scale ou rotate) peut augmenter le temps de rendu, en particulier pour les animations fluides sur des éléments lourds.
- Compatibilité des unités : transform-origin permet de mélanger différents types d'unités (par exemple, % pour l'axe horizontal et px pour l'axe vertical). Cela donne une grande flexibilité pour placer précisément le point d'origine, en fonction des besoins du design.
Dernière mise à jour : Dimanche, le 20 décembre 2015