Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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);
}
like image 301
egr103 Avatar asked Feb 10 '15 15:02

egr103


People also ask

How do I change the text rotation in HTML?

Rotate text can be done by using the rotate() function. We can rotate the text in a clockwise and anti-clockwise directions. The rotate function can also rotate HTML elements as well.

Which transformation works with respect to origin?

The transform origin is the point around which a transformation is applied. For example, the transform origin of the rotate() function is the center of rotation.

What is Transformorigin?

Definition and Usage. The transform-origin property allows you to change the position of transformed elements. 2D transformations can change the x- and y-axis of an element. 3D transformations can also change the z-axis of an element. To better understand the transform-origin property, view a demo.

How do I rotate a Div 90 degrees?

An element can be rotated 90 degrees by using the transform property. This property is used to move, rotate, scale and others to perform various kinds of transformation to elements. The rotate() transformation function can be used as the value to rotate the element.


2 Answers

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.

like image 160
Nils Kaspersson Avatar answered Oct 26 '22 23:10

Nils Kaspersson


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

like image 29
vals Avatar answered Oct 27 '22 00:10

vals