How to Make CSS3 Transform:Rotate Automatically Resize

Question

I am looking for the best approach to solve this situation:

Given a 4 cell grid. I'd like the top row to be of fixed height and the right column to be of fixed width. The left column's width and the bottom row's height would then resize automatically as you resize the screen.

(that's the easy part .. just set the "northeast" cell in an HTML TABLE to fixed size and set the TABLE's height and width to 100%)

Now the tricky part. I want the southeast, northwest, and northeast cells to be rotated. Since the northeast cell is a fixed size square, that's super easy to do, just rotate it. However the southeast and northwest cells are dynamic in size based on the window's height and width.

Here is a super simple example of the situation -- I will rotate only the southeast corner for this example:

<html>
<head>
    <style>
        #mainGrid {
            width: 100%;
            height: 100%;
        }
        #nw {
            background-color:blue;
        }
        #ne {
            height: 100px;
            width: 100px;
            transform:rotate(180deg);
            background-color:red;
        }
        #sw {   background-color:yellow; }
        #se {
            transform:rotate(-90deg);
            background-color:green;
        }
    </style>
</head>

<body>
    <table id="mainGrid">
    <tr>
        <td id="nw">Northwest</td>
        <td id="ne">Northeast</td>

    </tr>
    <tr>
        <td id="sw">Southwest</td>
        <td id="se">Southeast</td>
    </tr>
    </table>
</body>
</html>

Which results in:

Result of running the code above

What would be the simplest approach to getting the TABLE (or a grid of DIV or UL) to behave nicely when the screen is resized, like it does before the rotation? In other words, the southeast cell would have the same size and location it originally did, but the contents would layout rotated.

Can this be done with pure HTML5/CSS3 and no javascript? If not, what would be the simplest javascript I could use -- without any libraries -- to pull this off?

So you want the southeast element to fit that whitespace and for the content to be rotated? — Rorschach120
– Rorschach120, Commented Mar 27, 2015 at 19:21
Correct. And it should fill the whitespace even when the window is resized. — alfreema
– alfreema, Commented Mar 27, 2015 at 19:23
I recommend not rotating the entire element and instead rotating the inner content. — Rorschach120
– Rorschach120, Commented Mar 27, 2015 at 19:25
So I would need to rotate each piece of content individually, or is there a "wholesale" way to rotate the inner content all at once? Hmm, you are giving me some ideas of things to try. :) — alfreema
– alfreema, Commented Mar 27, 2015 at 19:27

sbatson5 · Accepted Answer · 2015-03-27 19:25:18Z

2

You could just wrap the content in a div or something and rotate that rather than the td itself:

<table id="mainGrid">
<tr>
    <td id="nw">Northwest</td>
    <td id="ne">Northeast</td>

</tr>
<tr>
    <td id="sw">Southwest</td>
    <td id="se"><div class="rotated">Southeast</div></td>
</tr>
</table>

CSS:

#mainGrid {
     width: 100%;
    height: 100%;
}
 #nw {
     background-color:blue;
 }
 #ne {
     height: 100px;
     width: 100px;
     transform:rotate(180deg);
     background-color:red;
  }
  #sw {   background-color:yellow; }
 #se {
     background-color:green;
  }
  .rotated {
      transform:rotate(-90deg);
 }

Fiddle: https://jsfiddle.net/2hagsgs2/

answered Mar 27, 2015 at 19:25

sbatson5

64811 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rorschach120 Over a year ago

Damn, he beat me to it. Here's a fiddle, check out the calc() for handling the size of the other elements. jsfiddle.net/fgsebpn2/1

alfreema Over a year ago

Ah very nice. Is there any way to also give you credit for the assistance?

Collectives™ on Stack Overflow

How to Make CSS3 Transform:Rotate Automatically Resize

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related