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 cub

Answer 1

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 :(

Answer 2

The best I've found is by doing a bit of javascript.

Instead of using the translateZ() value, I've used the transform-origin: x y z for the axis to be at the center of the cube.

The point is that the cube can turn on its center (and not turn on a center of the main face and translate z...)

Here is the jQuery function (eventually to apply on $(document).ready() and $(window).resize()) :

function get50() {
  var half_width = $('#front').width() / 2;
  $('#front').css({
    transformOrigin : '50% 50% -' + half_width + 'px'
  });
}

You can see a DEMO here...