CODEWITHSUNDEEP
csstransform
Somebody
Somebody

Reputation: 9645

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

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

Upvotes: 10

Views: 20899

Answers (2)

Jon P
Jon P

Reputation: 19802

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

Upvotes: 34

Manwal
Manwal

Reputation: 23836

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

Upvotes: 0

Related Questions