У меня есть контейнер, который может содержать другие элементы div, p, image и другие элементы html.
<div id="mycontainer">
<div>This is a child div positioned on top middle</div>
<p>This is a paragraph position on the middle on container div</p>
<!-- image positioned at the bottom -->
<img src="image.jpg"></img>
</div>
Когда я щелкаю (с помощью мыши) или касаюсь/зажимаю часть div #mycontainer, я хочу увеличить div #mycontainer с его содержимым (div,p,img) относительно положения, в котором пользователь щелкнул/нажал/ущипнул
Как мне сделать это в javascript/jquery, используя css transform translate() и scale()?
В настоящее время я знаю, как его установить, это будет так:
$('#mycontainer')
.css('-moz-transform', 'scale(1) translate(0px, 0px)')
.css('-webkit-transform', 'scale(1) translate(0px, 0px)')
.css('-o-transform', 'scale(1) translate(0px, 0px)')
.css('transform', 'scale(1) translate(0px, 0px)');
но я не знаю, как вычислить значения в translate(), когда пользователь нажимает/зажимает
ОБНОВЛЕНИЕ:
Ответы здесь кажутся похожими, но они используют transform-origin Увеличить на точку (с использованием масштабирования и перевода)
Я не хочу использовать преобразование-происхождение, я просто хочу использовать преобразование: перевод () и преобразование: масштаб ()
Я хочу, чтобы эта реализация была реализована в демоверсии домашней страницы http://hammerjs.github.io/. Попробуйте зажать белую коробку, и она будет масштабироваться и вращаться. Мне не нужен код для поворота, просто масштабируйте
Пожалуйста помоги!