title: How to change where a CSS transition starts from?
body: <p>Suppose I have a <code>&lt;div&gt;</code> which I would like to expand from a small size to a bigger size (See <a href="http://jsfiddle.net/7ZUeu/38/" rel="noreferrer">this</a>).</p>
  
  <p>By default, a width and height CSS3 transition on a <code>&lt;div&gt;</code> will start from the top left and progress to the bottom right. However, I want the <code>&lt;div&gt;</code> to expand from the top right corner to the bottom left.</p>
  
  <p><strong>Here is my question: Is there any way I could make the <code>&lt;div&gt;</code> undergo a width and height transition from the top right corner to the bottom left?</strong></p>
  
  <p>Here's an image to clarify my question. Basically, I would like my <code>&lt;div&gt;</code> to expand like the box on the right, not like the default way, shown by the box on the left.
  <img src="https://i.stack.imgur.com/ovBXr.png" alt="Description of Problem: I would like my &lt;code&gt;&lt;div&gt;&lt;/code&gt; to expand from the top right to the bottom left, as shown below, rather than from the top left to the bottom right."></p>
  
  <p><strong>Here's another image:</strong>
  <img src="https://i.stack.imgur.com/3UvE7.png" alt="enter image description here"></p>