Propriété CSS transform-origin

La propriété transform-origin permet de changer la position de la transformation de l'élément.

La propriété transform-origin ne fonctionne qu'avec la propriété transform.

Cette propriété peut être spécifiée en utilisant des mots clés de décalage, valeurs de longueur, ou valeurs de pourcentages.

Pour la compatibilité maximale des navigateurs, les extensions telles que -webkit- pour Safari, Google Chrome, et Opera (plus nouvelles versions), sont utilisées avec cette propriété.

Valeur initiale	50% 50% 0
Appliquée à	Éléments transformables.
Héritée	Non.
Animable	Oui. Degré est animable.
Version	CSS3
Syntaxe DOM	Object.style.transform-origin = "10% 30%";

Syntaxe

transform-origin: x-offset y-offset z-offset | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .big {
      position: relative;
      height: 300px;
      width: 300px;
      margin: 80px;
      padding: 5px;
      border: 2px solid #666;
      background-color: #eee;
      }
      .little {
      padding: 60px;
      position: absolute;
      border: 2px solid #666;
      background-color: #8ebf42;
      -ms-transform: rotate(35deg); /* IE 9 */
      -ms-transform-origin: 70% 90%; /* IE 9 */
      -webkit-transform: rotate(35deg); /* Safari 3-8 */
      -webkit-transform-origin: 70% 90%; /* Safari 3-8 */
      transform: rotate(35deg);
      transform-origin: 70% 90%;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété transform-origin</h2>
    <div class="big">
      <div class="little">Box</div>
    </div>
  </body>
</html>

Essayez-vous-même!

Un autre exemple qui affiche la différence entre les valeurs :

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      body {
      background-color: #eee;
      font-size: 1.1em;
      font-family: 'Roboto', Helvetica, sans-serif;
      }
      .container {
      margin: 10px auto;
      max-width: 700px;
      }
      .wrap {
      width: 150px;
      height: 150px;
      border: 2px solid #666;
      display: inline-block;
      margin: 100px;
      }
      .box {
      width: 150px;
      height: 150px;
      position: relative;
      color: #eee;
      text-align: center;
      line-height: 150px;
      -webkit-transform: rotate(25deg);
      -ms-transform: rotate(25deg);
      transform: rotate(25deg);
      }
      .a {
      background-color: #0747af;
      }
      .b {
      background-color: #40b530;
      -webkit-transform-origin: top left;
      -ms-transform-origin: top left;
      transform-origin: top left;
      }
      .c {
      background-color: #666;
      -webkit-transform-origin: 90% 120%;
      -ms-transform-origin: 90% 120%;
      transform-origin: 90% 120%;
      }
      .d {
      background-color: #ffdb11;
      -webkit-transform-origin: 80px 40px;
      -ms-transform-origin: 80px 40px;
      transform-origin: 80px 40px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété transform-origin</h2>
    <div class="container">
      <div class="wrap">
        <div class="box a">
          50% 50%
        </div>
      </div>
      <div class="wrap">
        <div class="box b">
          top left      
        </div>
      </div>
      <div class="wrap">
        <div class="box c">
          90% 120%       
        </div>
      </div>
      <div class="wrap">
        <div class="box d">
          80px 40px       
        </div>
      </div>
    </div>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
x-offset	Spécifie la position de l'affichage en décalage-x. Elle peut avoir les valeurs suivantes: left right center length percentage
y-offset	Spécifie la position de l'affichage en décalage-y. Elle peut avoir les valeurs suivantes: top center bottom length percentage
z-offset	Spécifie la position de l'affichage en décalage-z pour les transformations 3D. Elle peut avoir les valeurs suivantes: length
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.