为什么 scaleX 会导致绝对定位的元素向左移动？答案

【问题标题】：Why does scaleX cause absolutely positioned element to move leftward?为什么 scaleX 会导致绝对定位的元素向左移动？
【发布时间】：2016-02-10 05:42:58
【问题描述】：

我有一个绝对定位的父对象，其中包含一些绝对定位的文本，需要对其进行拉伸以匹配底层图像。它看起来像这样：

<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>

当我在页面上放置文本项时，我有（正确的）左值作为文本的 sn-p。但是，有些文本需要使用 CSS 变换属性进行拉伸。

transform: scaleX(#)

当 div 被拉伸时，它不会在视觉上保持相同的左侧位置，方式类似于此示例：

1->     xxxxx
2->  xxxxxxxxxxx

我希望效果如下。

1->     xxxxx
2->     xxxxxxxxxxx

除了修复之外，我很好奇为什么“左”没有考虑到这一点。如果我将一个元素定位在“左：0”，它是否应该继续在该处保留其“左”边缘，而不管它如何增长？

编辑以获取更多详细信息：

      .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;
      }

示例文本项如下所示：

<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>

【问题讨论】：

我们也需要你的 CSS 。（相对/绝对 - 变换原点？，...）
添加了更多关于结构/css的信息

标签： css css-position css-transforms pdf.js

【解决方案1】：

您可以使用transform-origin: 为您的变换设置原点。

我做了一个codepen。链接在这里 http://codepen.io/Prashantsani/pen/QjWdQV

【讨论】：

一个很好的资源。使用 transform-origin: left，我能够达到我想要的效果
谢谢。 transform-origin：是一个重要的属性。祝你的项目好运。