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:
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);
}
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.
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.
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.
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.
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:
<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>
.position-me {
transform: translateX(-100%);
}
.rotate-me {
transform: rotate(-90deg);
transform-origin: right top;
text-align: right;
}
Here's a pen.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With