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

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

Это неверно при использовании CSS3 transform: translate3d(). Если для координат X, Y или Z используются процентные значения, процент представляет собой размеры текущего объекта, а не его родителя.

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

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

Mozilla Developer Network подтверждает, что: Проценты (в переходах) относятся к размеру ограничивающей рамки.

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


css css-animations css-transforms translate3d
person Bunkai.Satori    schedule 30.07.2014    source источник

Ответы (4)


arrow_upward
3
arrow_downward

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

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

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

person SVSchmidt    schedule 30.07.2014
comment
привет и спасибо за ваш ответ. Я вижу, что ваше решение - использовать JS. Если вы согласны, я постараюсь оставить эту тему открытой. Может быть, кто-то приходит с рабочим решением CSS. В любом случае +1 за рабочее решение. Спасибо. - person Bunkai.Satori; 31.07.2014

arrow_upward
1
arrow_downward

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

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

person Vorenus    schedule 30.07.2014
comment
привет и спасибо. Мне пришла в голову идея использовать JavaScript для динамического вычисления значений, а затем настроить translate3d() объекта через JS. Я бы все же предпочел посмотреть, есть ли решение только для CSS. Я оставлю эту тему открытой, так как информация может оказаться полезной и для вас. Но спасибо за вашу помощь и +1. - person Bunkai.Satori; 31.07.2014

arrow_upward
1
arrow_downward

@Bunkai.Satori Чтобы сделать это в чистом css, просто поместите этот элемент в новый контейнер, который соответствует родительской ширине и высоте, а затем используйте transform3d() в новом контейнере.

person waleedq    schedule 21.09.2016

arrow_upward
0
arrow_downward

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

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

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

person Alex Kleinubing    schedule 06.05.2016