title: CSS3 translate relative to top right
body: <p>Is it possible to do a CSS3 translate with the origin of the translation being the top right corner? I have tried the following:</p>
  
  <pre><code>transform-origin: top right;
  transform: translate3d(10px, 10px, 0);
  </code></pre>
  
  <p>(<a href="http://jsfiddle.net/justspamjustin/vtn8jmb1/" rel="nofollow noreferrer">jsfiddle</a>)
  but the translation still seems to be happening from the top left.  Is it possible to translate via the top right, bottom left, bottom right etc.?</p>
  
  <p>This image shows the result of the above CSS. (The red box is translated 10px from the top and 10px from the left):</p>
  
  <p><img src="https://i.stack.imgur.com/nEQw4.png" alt=""></p>
  
  <p>This image shows the behavior that I want (red box translated 10px down from the top, but also 10px from the right of the grey container).</p>
  
  <p><img src="https://i.stack.imgur.com/rGHu2.png" alt=""></p>
  
  <p>I know that I can do this by using:</p>
  
  <pre><code>position: absolute;
  top: 10px;
  right: 10px;
  </code></pre>
  
  <p>but my question is: is this possible by using CSS3 translations?</p>