Question

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

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

当我将文本项目放在页面上时，我会为文本片段保留（正确的）左侧值。但是，某些文本需要使用CSS转换属性进行拉伸。

transform: scaleX(#)

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

1->     xxxxx
2->  xxxxxxxxxxx

我希望效果如下。

1->     xxxxx
2->     xxxxxxxxxxx

除了修复，我很好奇为什么＆＃39;离开＆＃39;不考虑这一点。如果我将一个元素放在左边：0＆＃39;，那么它不应该继续使用它的左边＆＃39;无论它如何成长，都会在那里边缘？

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

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

Answer 1

您可以使用$vote = $_POST['vote']; // either 'good', or 'bad' // do what you need with it为转换设置原点。

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

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

1 个答案: