« Le langage CSS/Transformation géométrique » : différence entre les versions
Contenu supprimé Contenu ajouté
Aucun résumé des modifications |
|||
Ligne 187 :
Les constantes dans les troisièmes colonne et ligne de matrice permettent de préserver la coordonnée Z qui reste donc inchangée par une matrice 2D.
== Point origine ==
La rotation se fait par défaut autour du point d'origine de l'élément (0,0).
Pour éviter une translation, il est possible de modifier ce point en définissant la propriété <code>transform-origin</code><ref>https://developer.mozilla.org/fr/docs/Web/CSS/transform-origin</ref>.
La valeur peut être exprimée en pixels, en pourcentage de la taille de l'élément ou par un nom.
Il peut y avoir 3 coordonnées pour les rotations 3D.
Exemples :
* <syntaxhighlight lang="css" inline>transform-origin: bottom right 60px;</syntaxhighlight>
* <syntaxhighlight lang="css" inline>transform-origin: 40% 50px;</syntaxhighlight>
* <syntaxhighlight lang="css" inline>transform-origin: center;</syntaxhighlight>
* <syntaxhighlight lang="css" inline>transform-origin: top left;</syntaxhighlight>
== Références ==
| |||