Pourquoi scaleX force-t-il l'élément à se déplacer vers la gauche?

Question

J'ai un parent positionné de manière absolue contenant des bits de texte absolument positionnés, qui doivent être étirés pour correspondre à l'image sous-jacente. Il ressemble à ceci:

<div class="text-layer"> 
    <pre class="text-item"> some text </pre> 
    <pre class="text-item"> some text </pre> 
    <pre class="text-item"> some text </pre> 
</div> 

Quand je place les éléments de texte sur la page, je la valeur (correcte) gauche pour l'extrait de texte. Cependant, certains textes doivent être étirés à l'aide de la propriété de transformation CSS.

transform: scaleX(#) 

Lorsque la div est tendue, il ne garde pas la même position gauche visuellement, d'une manière similaire à cet exemple:

1->  xxxxx 
2-> xxxxxxxxxxx 

Je voudrais que l'effet soit comme suit. En plus d'un correctif, je suis curieux de savoir pourquoi «gauche» n'en tient pas compte. Si je positionne un élément à 'left: 0', ne devrait-il pas continuer à avoir son bord 'left' là, peu importe comment il se développe?

Modifier pour plus de détails:

 .my-canvas { 
     margin-left: auto; 
     margin-right: auto; 
     margin-top: 10px; 
     background-color: white; 
     display: block; 
     } 

     .text-layer { 
     color: transparent; 
     position: absolute; 
     left: 0; 
     right: 0; 
     top: 0; 
     margin-left: auto; 
     margin-right: auto; 
     } 

Un exemple élément de texte ressemble à ceci:

<div class="text-item" 
    style="position: absolute; left: 80.5557355px; 
      top: 4.49999999999996px; font-size: 50px; 
      font-family: sans-serif; 
      transform: scaleX(2.58938106853314);"> 
    <span class="highlight">H</span>ELLO 
</div> 

Answer 1

Vous pouvez utiliser transform-origin: pour définir un point d'origine pour vos transformations.

J'ai fait un codepen. Voici le lien http://codepen.io/Prashantsani/pen/QjWdQV