CSS3 transform for text-rotate?

If I'm not mistaken elements are part of the normal flow or are floated as if they are not transformed. Once their position has been established, then the transformation or transition is performed. The transformation or transition will not have any influence on the document flow or any floating anymore.

Up vote 1 down vote favorite 1 share g+ share fb share tw.

I have a question relating to the CSS3 transform property (for text rotating) Based on my usage of the following; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); transform: rotate(-90deg); It seems that the box model changes somewhat i.e. Top/right/bottom/left get calculated differently. Also width/height and floats seem to get affected.

Take this example image below; Could you please explain me in simple terms What is the exact impact of rotating text (say by 90 degrees as shown above) on top/right/bottom/left padding/margin, etc Say if we have 2 floating elements. One which has the above rotated text and other div with some other content like below; I wanted to understand how to make the 2nd div (Right panel) start exactly after the 1st div (Rotated text)? My Classes Right Panel Thank you.

Css html5 css3 link|improve this question edited Oct 22 '11 at 15:35 asked Oct 22 '11 at 14:58testndtv2,95721548 99% accept rate.

If I'm not mistaken elements are part of the normal flow or are floated as if they are not transformed. Once their position has been established, then the transformation or transition is performed. The transformation or transition will not have any influence on the document flow or any floating anymore.

What side is top, left, right or bottom does get affected by the transformation. So if you apply a border to the top of the rotated div in your example, the border will show up on the left side. EDIT: In order to hopefully help you understand it a bit more, I've created a sample which is similar to yours but I've added padding, margin and top and bottom borders which hopefully illustrate what is what.

I've also added background colors and borders to clearly see the size of block elements and how they are rotate. Rotated text Other content It's important to remember that everything is laid out before the transformation is applied. The most interesting part about this example I think is how the margins do get applied in order to align both divs next to each other and align them both to the left side of the page.

If no margin and transformation would be applied, the left side div would be floated against the left side of the page and the right side div would be floated against that. If we would then just add the transformation (no margins yet), the div would get rotated -90 degrees (with the right top as origin) and would end up on top of the right side div. At the same time, it would also leave a big white gap on the left side where the left div was originally positioned.

Remember, transformations do not affect floating. In order to get both elements visually aligned to the left side of the page again we have to apply a margin. In order to get the left div to the left side we have to apply a negative margin to the left side.

This might be confusing but remember that the margin is applied before the transformation. So in order to get the div appear on the spot we want it after the transformation, we first have to move it before the transformation by -360 pixels (= 300 width + 30 padding left + 30 padding right) to the left side so that it appears at exactly 0 pixels after the -90 degrees rotation. The right side div is floated against the left side div.

So it's effectively positioned at x position 360. Because we move the left side div to the left with a negative margin of -360 pixels it will now end up at pixel 0. So it's on the same position as the left side div after the transformation.

In order to visually align it to the right side of the left div we have to apply a positive margin to it. How much? Another possibly confusing part is that we here have to calculate that based on the rotated left div as we have to align it visually to the rotated left div.

So it's 50 (height = width of rotated div) + 10 (top padding) + 10 (bottom padding) + 2 x 2 (2 x top/bottom border) = 74 pixels. I've added another margin to the top of the right div of 18 pixels to visually align the span's content areas. Hope this all helps in understanding that all padding, margin, position and floating is always calculated pre-transformation.

– testndtv Oct 22 '11 at 18:15 Thx a lot again for the updated answer...i m able to understand much better now...There is only 1 thing to add...Actually I need to use this as part of fluid layout..i.e. I do not have the privilege of using fixed px value anywhere..neither for width/padding/margin, etc..i can only use % units...this is in a way to ensure layout works across desktop/mobile/tablet browsers.....in my case, i'll be having the 2 divs in a container div and that has overflow:hidden applied. So how do I make these work given what I have?

I'll close and accept this as soon as I get an answer on this point..Thx again. – testndtv Oct 23 '11 at 10:28 A +1 for now.... – testndtv Oct 23 '11 at 11:13 Just to add why the fluid (%) layout is important here is bcoz I have given the container div {width:100%;height:100%} ...Now I am wondering how do I calculate the (%) padding/margin/position for the 2 child divs with respect to this container div...Hope I am able to clarify the point/issue I am referring to... – testndtv Oct 23 '11 at 12:01 any updates on this? – testndtv Oct 23 '11 at 17:38.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.