8

I have noticed that right:0px is positioning an element incorrectly. transform:scale doesn't recalculate the 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;
}
4
  • show us the css code... Aug 7, 2014 at 3:47
  • that's not really helpful to answer.... Aug 7, 2014 at 3:49
  • 1
    Whatever, i have updated the main post. I don't care about reputation :D So if you can't imagine 3 css properties in the mind, that confuses me a bit, i'm in the right place of not :D
    – Somebody
    Aug 7, 2014 at 3:55
  • 4
    Context is always helpful
    – Jon P
    Aug 7, 2014 at 3:56

2 Answers 2

32

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

2
  • 1
    Thank you mate. Didn't knew about transform-origin.
    – Somebody
    Aug 7, 2014 at 4:23
  • For most transforms it's 50% 50% (the middle) by default.
    – Jon P
    Aug 7, 2014 at 4:24
0

Add this In your css:

-ms-transform: scale(3); /* IE 9 */
-webkit-transform: scale(3); /* Chrome, Safari, Opera */

Full code:

#stick_me {
    border:1px solid red;
    display:inline-block;
    transform:scale(3);
    -ms-transform: scale(3); /* IE 9 */
    -webkit-transform: scale(3); /* Chrome, Safari, Opera */
    position:absolute;
    right:0px;
    top:0px;
}

DEMO

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.