Css3 переводить в процентах

Я зациклился на определении куба css3 полностью с процентами.

Вот короткий пример в Codepen

Как вы можете видеть, грани куба имеют 100% ширину и высоту своего родительского элемента, который отлично работает. Теперь я пытаюсь перевести нижнюю грань на 50% вниз и на 50% назад.

с значениями пикселей это не проблема

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

но с процентом ничего не происходит

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

Есть ли другой способ? или я чего-то не хватает?

Ответ 1

В процентах нет родительского контейнера, как вы могли бы ожидать, но самого элемента. Спектр описывает это как:

[Процент] ссылается на [s] на размер поля элемента

Что касается% s, спецификация говорит:

Обратите внимание, что значения не допускаются в translateZзначение перевода, и если оно присутствует, это приведет к тому, что значение свойства будет недействителен.

Хотя, похоже, вместо этого они недействительны ни в одном из них для Chrome по крайней мере.

Извините: (

Ответ 2

Самое лучшее, что я нашел, это сделать немного javascript.

Вместо того, чтобы использовать значение translateZ(), я использовал transform-origin: x y z, чтобы ось была в центре куба.

Дело в том, что куб может включать его центр (а не включать центр главной грани и переводить z...)

Вот функция jQuery (в конце концов для применения на $(document).ready() и $(window).resize()):

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

Здесь вы можете увидеть DEMO здесь...