title: css3 translate in percent
body: <p>I am stuck on defining an css3 cube completely with percent.</p>
  
  <p>Here a short example in Codepen </p>
  
  <p><a href="http://codepen.io/anon/pen/detAB">http://codepen.io/anon/pen/detAB</a></p>
  
  <p>As you can see the cube faces have 100% width and height of its parent element, which works perfect. Now i am trying to translate the bottom face 50% down and 50% back.</p>
  
  <p>with pixel values this is no problem</p>
  
  <pre><code>transform: rotateX(-90deg) translateZ(50px) translateY(50px);
  </code></pre>
  
  <p>but with percent nothing happens</p>
  
  <pre><code>transform: rotateX(-90deg) translateZ(50%) translateY(50%);
  </code></pre>
  
  <p>is there any other way? or am I missing something?</p>