Как сделать приближение/удаление блоков в блоке?

Question

[Artem0071]

Есть структура:

<div id="app">
  <div class="container">
    <div class="some_item"></div>
    <div class="some_item"></div>
    <div class="some_item"></div>
  </div>
</div>

#app - это блок который занимает 100% ширины и высоты экрана
. container - некий элемент с заданной фиксированной шириной и высотой (например 2000х2000px)
.some_item - некие элементы, которые можно таскать по .container'у тоже с заданной шириной и высотой (например 100х100px)

Как сделать так, чтобы можно было приближать и отдалять эти блоки?
В моем понимании нужно просто как то сделать так, чтобы отдалялся сам контейнер, а за ним уже и блоки будут

Но как это вообще можно сделать?
PS. VueJS использую, мб есть плагин како то готовый для этого?

Answer 1

[zoozag]

transform: scale();

Comments

[Artem0071]

не изменяет ширину и высоту контейнера

код

[Kovalsky]

Artem0071, потому что вы не изменяете ширину и высоту элемента о котором говорите, в вашем примере #container увеличивается.

Answer 2

[Артём]

zoozag снял с языка)
Посмотрите, это то что вы хотели?
https://codepen.io/anon/pen/PJoBBQ?editors=1100
если нужно оставлять состояние, то js по нужному событию накидывать на . some_item класс, в котором будет transform: scale();

Comments

[Artem0071]

Как то изменилось не правильно у меня)

почему то не среагировали ширина и высота

крутойкод