title: Align a rotated fixed-position HTML block with right hand side of window using CSS3's transform: rotate(-90deg)
body: <p>Is it possible to rotate a fixed-position block of text 90 degrees and then align it flush to the right-hand side of a window?</p>
  
  <p>I've some code that <a href="http://jsfiddle.net/nvhbU/" rel="nofollow">demonstrates the problem on jsFiddle</a>. The code is:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;html&gt;&lt;body&gt;
  &lt;div&gt;This is not flush with the right.&lt;/div&gt;
  &lt;p&gt;This is flush&lt;br/&gt; with the right&lt;/p&gt;
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>* {
    margin: 0px;
    padding: 0px;  
  }
  
  div {
      position: fixed;
      -webkit-transform: rotate(-90deg);
      right: 0px;
      top: 50%;
      background-color: pink;
  }
  
  p {
      position: fixed;
      right: 0px;
      background-color: yellow;
      top: 100px
  }
  </code></pre>
  
  <p>In Google Chrome 14.0.835.163 the <code>&lt;div&gt;</code> is not aligned to the right hand side. I suspect it's because the transform/rotation is performed after an alignment (which is the expected behaviour). However, is there a way using HTML/CSS to have a transformed/rotated block of text aligned to the right-hand side of a window?</p>
  
  <p>Thank you for reading.</p>