How to zoom in/out blocks in a block?

Question

css

There is a structure:

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

#app is a block that takes up 100% of the screen width and height
. container - some element with a given fixed width and height (for example 2000x2000px)
.some_item - some elements that can be dragged around the .container with a given width and height (for example 100x100px)
How to make it possible to zoom in and out of these blocks ?
In my understanding, you just need to do something so that the container itself moves away, and behind it there will already be blocks.
But how can this be done at all?
PS. I use VueJS, is there any plugin ready for this?

Answer 1

transform:scale();

Answer 2

zoozag removed from the tongue)
Look, is this what you wanted?
https://codepen.io/anon/pen/PJoBBQ?editors=1100
if you need to leave the state, then throw js on the desired event on . some_item is the class that will have transform: scale();