Menu
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
I wanted to understand how to make the 2nd div (Right panel) start exactly after the 1st div (Rotated text) ?
<div class="fl text-transform-class">My Classes</div>
<div class="fl">Right Panel</div>
Thank you.
329
If what you are looking for is a way to set type vertically, you're best bet is probably CSS writing-mode . The rotation property of Internet Explorer's BasicImage filter can accept one of four values: 0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degrees respectively.
Select the text box that you want to rotate or flip, and then select Format. Under Arrange, select 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.
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.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
margin: 0;
}
.fl {
border-top: solid 2px #ff0000;
border-bottom: solid 2px #00ff00;
float: left;
color: #ffffff;
padding: 10px 30px;
}
.left {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
-o-transform-origin: 100% 0;
transform-origin: 100% 0;
background-color: #808080;
height: 50px;
width: 300px;
margin-left: -360px;
}
.right {
background: #404040;
height: 300px;
width: 300px;
margin-top: 18px;
margin-left:74px;
}
span {
display: block;
width: 100%;
height: 100%;
background-color: #A0A0A0;
}
</style>
</head>
<body>
<div class="fl left"><span>Rotated text</span></div>
<div class="fl right"><span>Other content</span></div>
</body>
</html>
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.
166
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
