Accueil    CSS    Propriété transform-origin
 



style css transform-origin  Style CSS transform-origin

«  Partie précédente  |  Index  |  Partie suivante  »


La propriété css transform-origin permet de définir le point d'origine d'une transformation. Par défaut le point d'origine d'une transformation sur un élément html est le centre de celui-ci : 50% de sa longueur (axe X), 50% de sa hauteur(axe Y) et 0 sur la profondeur (axe Z).

L'une de ses utilisation les plus courante se fait pour réaliser des rotations. Par défaut l'objet tourne sur lui-même, mais si l'origine de la transformation est définie sur un point spécifique, l'élément html tournera autour de ce point.

La définition du point d'origine se fait par rapport à l'angle supérieur gauche de l'élément html et pas par rapport à son centre (ce qui explique les valeurs par défaut à 50%).

Actuellement chaque navigateur se base sur sa propre version de la propriété transform-origin, ce qui fait beaucoup de duplication de code css :
    - Chrome et safari utilisent la propriété "-webkit-transform-origin"
    - Firefox utilise la propriété "-moz-transform-origin"
    - Opera utilise la propriété "-o-transform-origin"
    - Internet Explorer utilise la propriété "-ms-transform-origin"



Propriétés pour le style transform-origin :




Propriété Définition Valeurs CSS
transform-origin Défini la position de l'origine de la transformation:

transform-origin: axeX axeY axeZ;
center
left
right
val (px ...)
%
CSS 3
axe-X Défini la position de l'origine de la transformation sur l'axe X center
left
right
val (px ...)
%
CSS 3
axe-Y Défini la position de l'origine de la transformation sur l'axe Y center
left
right
val (px ...)
%
CSS 3
axe-Z Défini la position de l'origine de la transformation sur l'axe Z val (px ...) CSS 3

Exemple d'utilisation du style css transform-origin :




Rotation avec un centre de transformation spécifique (200px sur l'axe X, 50% sur l'axe Y) :

<style type="text/css">
.divTransformCadre{
   position:relative; width:400px; height:400px; border:solid 1px black;
}
.divOrigine{
   width:4px; height:4px;
   position:absolute; top:198px; left:198px;
   background-color:red; border-radius:2px;
}
.divTransform{
   position:absolute; top:148px;
   width:100px; height:100px;
   border:solid 2px grey; border-radius:52px;
   text-align:center; font-size:24px; line-height:100px;
   background-color:lightsteelblue;
   transform-origin:200px 50% 0;
   -webkit-transform-origin:200px 50% 0; -moz-transform-origin:200px 50% 0;
   -ms-transform-origin:200px 50% 0; -o-transform-origin:200px 50% 0;
}
</style>

<div class="divTransformCadre">
   <div class="divOrigine"></div>
   <div class="divTransform">0</div>
   <div class="divTransform" style="transform:rotate(60deg); -ms-transform:rotate(60deg); -webkit-transform:rotate(60deg); -moz-transform:rotate(60deg); -o-transform:rotate(60deg);">60</div>
   <div class="divTransform" style="transform:rotate(120deg); -ms-transform:rotate(120deg); -webkit-transform:rotate(120deg); -moz-transform:rotate(120deg); -o-transform:rotate(120deg);">120</div>
   <div class="divTransform" style="transform:rotate(180deg); -ms-transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg); -o-transform:rotate(180deg);">180</div>
   <div class="divTransform" style="-ms-transform:rotate(240deg); -webkit-transform:rotate(240deg); -moz-transform:rotate(240deg); -o-transform:rotate(240deg);">240</div>
   <div class="divTransform" style="-ms-transform:rotate(300deg); -webkit-transform:rotate(300deg); -moz-transform:rotate(300deg); -o-transform:rotate(300deg);">300</div>
</div>


Rotation avec un centre de transformation spécifique (200px sur l'axe X, 50% sur l'axe Y) :

0
60
120
180
240
300