CSS transform:scale(2) + position:absolute + right:0px is not working

Question

I have noticed, that right:0px is positioning element incorrectly. transform:scale doesn't recalculate element width.

Is there a way to properly stick this element to the right side?

HTML:

<div id="stick_me">
    blah blah blah<br />
    blah blah blah<br />
    blah blah blah<br />
</div>

CSS:

#stick_me {
    border:1px solid red;
    display:inline-block;
    transform:scale(3);
    position:absolute;
    right:0px;
    top:0px;
}

Thank you.

Solution

You want to use the transform-origin (https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin) property set to top right. As you are positioning the element to the top and right, you need it to scale from there, i.e. down and to the left.

#stick_me {
  border:1px solid red;
  display:inline-block;
  transform:scale(3);
  position:absolute;
  right:0px;
  top:0px;
  transform-origin:top right;
}

Demo

Comments

[Somebody]

Thank you mate. Didn't knew about transform-origin.

[Jon P]

For most transforms it's 50% 50% (the middle) by default.