I am stuck on defining an css3 cube completely with percent.
Here a short example in Codepen
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?
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.
This recipe can be found in it's original form on Stack Over Flow.