CODEWITHSUNDEEP
csstransformcss-transforms
egr103
egr103

Reputation: 3978

Transform origin relative to container. Rotated text

I need some help trying to understand how transform-origin works, I've done my Googling but cannot find anything that can help my specific use case. Here's what i'm trying to achieve: Here's how it should look

I have a fixed footer with a fixed height, within that I have two lines of rotated text (left hand column), how can I get complete control over its positioning? At the moment it starts at the top of the footer and is outside of the footer entirely, Ive setup a fiddle to show my current code: http://jsfiddle.net/eury7f6f/

Anybody have any ideas how to achieve what I want?

.vertical-text {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);

    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;

    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Upvotes: 10

Views: 17975

Answers (2)

Nils Kaspersson
Nils Kaspersson

Reputation: 9454

Think of setting transform-origin as slamming a nail into the block. A transform-origin: right bottom rotates the element around its lower right corner.

The 2d syntax is: transform-origin: x y, where 0 0 is left top and 100% 100% is right bottom.

As for the issue at hand; instead of rotating the actual text elements I'd wrap them in another element and rotate that element around its top right corner. Then wrap that element on another element and move it element 100% of its width back to the left. This element can then be positioned absolutely as you'd normally do.

That'll allow you to keep stacking elements and take them out of content flow if you wish.

This would look something like this:

HTML

<div class="position-me">
  <div class="rotate-me">
    <p>© Copyright Some vertical text.</p>
    <p>Oh my god some really long vertical text...how long?!</p>  
  </div>
</div>

CSS

.position-me {
  transform: translateX(-100%);
}

.rotate-me {
  transform: rotate(-90deg);
  transform-origin: right top;
  text-align: right;
}

Here's a pen.

Upvotes: 16

vals
vals

Reputation: 64164

Your problem is that there is no transform-origin that can give you what you want.

If your transform-origin is to the left of the div, you could get them aligned if it is ok to have them go downwards. (rotating 90deg instead of -90deg).

And if you set transform-origin to the right of the div, since the right ends are not aligned, it will become a mess.

Your best bet will be to add a translate to the rotation:

.vertical-text {
        -webkit-transform: rotate(-90deg)  translateX(-100%);
        -moz-transform: rotate(-90deg)  translateX(-100%);
        -ms-transform: rotate(-90deg) translateX(-100%);
        -o-transform: rotate(-90deg)  translateX(-100%);
        transform: rotate(-90deg)  translateX(-100%);

        -webkit-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        -o-transform-origin: 0 0;
        transform-origin: 0 0;

        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }

fiddle

Upvotes: 3

Related Questions