CODEWITHSUNDEEP
htmlcsscss-transforms
Naveen D Almeida
Naveen D Almeida

Reputation: 877

Webkit Transform scaling issue

Facing scaling issue, how to remove extra space between the two span elements.

I can't add extra tags as per requirement. within the span tag how to fix this issue.

span {
  -webkit-transform-origin-x: 0%;
  -webkit-transform-origin-y: 0%;
}

Before splitting span

    <p style="margin: 0.0px 0.0px 0.0px 0.0px; ">
        <span style="font-size: 14pt; color: #000000; letter-spacing: 0pt; text-transform: none; text-align: left; text-decoration: none; word-spacing: 1.33pt; -webkit-transform: scale(0.7,1); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); text-shadow: none; display: inline-block; white-space: nowrap ;width:auto;height:auto;">Keebler Zesta Saltine Crackers</span>
    </p>

Screenshot before splitting span

enter image description here

After splitting span

    <p style="margin: 0.0px 0.0px 0.0px 0.0px; ">
        <span style="font-size: 14pt; color: #000000; letter-spacing: 0pt; text-transform: none; text-align: left; text-decoration: none; word-spacing: 1.33pt; -webkit-transform: scale(0.7,1); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); text-shadow: none; display: inline-block; white-space: nowrap ;width:auto;height:auto;">Keebler Zesta Saltine</span><span style="font-size: 14pt; color: #000000; letter-spacing: 0pt; text-transform: none; text-align: left; text-decoration: none; word-spacing: 1.33pt; -webkit-transform: scale(0.7,1); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); text-shadow: none; display: inline-block; white-space: nowrap ;width:auto;height:auto;"> Crackers</span>
    </p>

Screenshot after splitting span

enter image description here

Upvotes: 0

Views: 436

Answers (2)

vals
vals

Reputation: 64254

Scale the container

p {
     -webkit-transform: scale(0.7, 1);
     transform: scale(0.7, 1);
}
    <p style="margin: 0.0px 0.0px 0.0px 0.0px; ">
        <span style="font-size: 14pt; color: #000000; letter-spacing: 0pt; text-transform: none; text-align: left; text-decoration: none; word-spacing: 1.33pt; text-shadow: none; display: inline-block; white-space: nowrap ;width:auto;height:auto;">Keebler Zesta Saltine</span>
      <span style="font-size: 14pt; color: #000000; letter-spacing: 0pt; text-transform: none; text-align: left; text-decoration: none; word-spacing: 1.33pt;  text-shadow: none; display: inline-block; white-space: nowrap ;width:auto;height:auto;"> Crackers</span>
    </p>

If you are only planning for 2 spans, you can align them using a global scale for the container, a scale for the second span, and setting the transform origin to the left so that the spacing between them doesn't change.

Note that the total scale of the second span is the combination of both transforms

p {
  font-size: 40px;
  transform: scale(0.5, 1);
}
.test {
  transform: scale(2, 1);
  transform-origin: left center;
  display: inline-block;
}
<p>
  <span>Keebler Zesta Saltine</span>
  <span class="test">Crackers</span>
</p>

Upvotes: 1

Christoph
Christoph

Reputation: 1630

Using CSS transforms doesn't affect the element's bounding box.

That's why during layouting the first span still has the same width like without scale(0.7,1).

You can try setting an explicit width for example. Or do some negative margin-right magic.

Upvotes: 1

Related Questions