css3 translate in percent

Question

I am stuck on defining an css3 cube completely with percent.

Here a short example in Codepen

http://codepen.io/anon/pen/detAB

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.

with pixel values this is no problem

transform: rotateX(-90deg) translateZ(50px) translateY(50px);

but with percent nothing happens

transform: rotateX(-90deg) translateZ(50%) translateY(50%);

is there any other way? or am I missing something?

Solution

The percentage there is not of the parent container in the way you might expect but of the element itself. The spec describes it as:

[The percentage] refer[s] to the size of the element's box

Regarding %s, the spec says:

Note that values are not allowed in the translateZ translation-value, and if present will cause the propery value to be invalid.

Though, it seems that instead, they aren't valid in any of them for Chrome at least.

Sorry :(

Comments

[jaypeagi]

Something handy I've found is using em to use relative distances within translate functions. Set the size of em in the parent element and then within there, 1em is 100%, 0.5em is 50% and so on.

[MHz]

Can you expand on that jaypeagi?