Transform3D (): Использование процента для перемещения в родительском объекте

Question

CSS имеет стандартное поведение при перемещении объекта в процентах, что этот процент представляет размеры своего родительского контейнера (DIV).

Это не соответствует действительности при использовании CSS3 transform: translate3d(). При использовании процентных значений для координаты x, y или z процент представляет <сильные> размеры текущего объекта , а не его родитель.

Проблема должна быть очевидна сейчас: если мне нужно использовать анимацию CSS3 и transform: translate3d() для перемещения текущего объекта в размерах своего динамически повторного родительского родителя, я просто не знаю, как это сделать. Пример: использование translate3d(100%, 0, 0) будет перемещать объект по физической ширине текущего объекта, а не его содержащий блок.

Любые идеи, как получить динамически меняющиеся размеры родителей, пожалуйста? Или как сделать нынешний объект перевести внутри своего родителя, используя аппаратный ускоренный генеракодицетагCode?

Mozilla Developer Network Убедитесь, что: Проценты (входы) относятся к размеру ограничительной коробки.

Есть ли обходной путь, пожалуйста?

Answer 1

Я не думаю, что есть решение только для CSS. Мой подход расчет соотношения между шириной упаковочного элемента и шириной ребенка с JavaScript, прежде чем умножить его с помощью целевого значения X:

var transform = "translate3d(" + translateX * (wrapperCompWidth / innerCompWidth) + "%,0,0)";

.

Вот рабочий пример того, что я имею в виду: http://jsfiddle.net/whre/7qhna/2 /

Answer 2

К сожалению, это невозможно с чистыми CSS, если вы не готовы использовать блоки Viewport - и даже тогда он был бы некоторым избирательным расчетом ширины родительского языка, если он отличается от ширины просмотра.Для процента родительских размеров вам нужно будет использовать JavaScript.

Вот простой пример JS. http://cssdeck.com/labs/bus53o22

Answer 3

@ bunkai.satori, чтобы сделать это в чистых CSS, просто поместите этот элемент в новый контейнер, который соответствует родительской ширине и высоте, затем используйте Transform3D () на новом контейнере.

Answer 4

Использовать z ось без фиксированных значений, используйте:

transform: rotateY(90deg) translateX(-50%) rotateY(-90deg);

.

Это вращается объект перед перемещением и снова вращается, чтобы нормализовать положение. Проверено в Google Chrome.