title: How to Make CSS3 Transform:Rotate Automatically Resize
body: <p>I am looking for the best approach to solve this situation:   </p>
  
  <p>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.</p>
  
  <p>(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%) </p>
  
  <p>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.</p>
  
  <p>Here is a super simple example of the situation -- I will rotate only the southeast corner for this example:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;style&gt;
          #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;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;table id="mainGrid"&gt;
      &lt;tr&gt;
          &lt;td id="nw"&gt;Northwest&lt;/td&gt;
          &lt;td id="ne"&gt;Northeast&lt;/td&gt;
  
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td id="sw"&gt;Southwest&lt;/td&gt;
          &lt;td id="se"&gt;Southeast&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Which results in:</p>
  
  <p><img src="https://i.stack.imgur.com/HRQxV.gif" alt="Result of running the code above"></p>
  
  <p>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.</p>
  
  <p>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?</p>