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>

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>

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.

Support de Navigateurs

36.0+
12.0-35.0 -webkit-
16.0+
10.0-15.0 -moz-
4.0+
-webkit-
23.0+
15.0-22.0 -webkit-


Trouvez-vous cela utile?

Articles Associées