How to rotate a div?

Question

Well, I have a div that contains secondary Ivs within it, what I intend to do is to make an effect, which rotates the interior Ivs, ie from right to left, keeping the position of the main div.

In other words, it was intended to move the interior Ivs by clicking a button, from right to left but maintaining the position of the main div.

How can I do that?

<style>
.goncalo {
   width: 0%;
   text-align: justify;
   display: flex;
   justify-content: space-between;
 }
 .preview-wrapper {
   width: auto;
}

</style>
<div class="goncalo" id="goncalo" style="-ms-transform:translate(159,430)">
<div style="background-color:blue;">
<div class="preview-wrapper" style="background-image: url('https://s3.eu-central-1.amazonaws.com/drakemoon-skins/2076466877.png'); background-repeat: no-repeat; width:100px; height:100px; background-size:100%;">
</div>
</div>
<div style="background-color:blue;">
<div class="preview-wrapper" style="background-image: url('https://s3.eu-central-1.amazonaws.com/drakemoon-skins/1309990995.png'); background-repeat: no-repeat; width:100px; height:100px; background-size:100%;">
</div>
</div>
<div style="background-color:blue;">
<div class="preview-wrapper" style="background-image: url('https://s3.eu-central-1.amazonaws.com/drakemoon-skins/1812816683.png'); background-repeat: no-repeat; width:100px; height:100px; background-size:100%;">
</div>
</div>
<div style="background-color:blue;">
<div class="preview-wrapper" style="background-image: url('https://s3.eu-central-1.amazonaws.com/drakemoon-skins/1310006695.png'); background-repeat: no-repeat; width:100px; height:100px; background-size:100%;">
</div>
</div>


            </div>
            <br>
            <br>


<script type="text/javascript">
function move_box() {
  var the_box = document.getElementById("#goncalo");
  if (the_box.classList.contains("translator")) {
    the_box.classList.remove("translator");
  } else {
    the_box.classList.add("translator");
  }
}
</script>

<button onclick="move_box()">Clicar!</button>   

Answer 1

Boas Goncalo, below I leave an example of how to achieve the pertendido result.

document.getElementById('rotate').onclick=function(){
  document.querySelectorAll('#main_div div').forEach(function(el){
    el.className="rotate";
  });
}

#main_div div{
  width:100px;
  height:100px;
  border: 1px dashed gray;
  display: inline-block;
}
#main_div .rotate{
    -webkit-transition: -webkit-transform 1s; /* Safari */
    transition: transform 1s;
}
.rotate{
    -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Safari */
    transform: rotate(-90deg); /* Standard syntax */
}

<div id="main_div">
  <div>DIV 1</div>
  <div>DIV 2</div>
  <div>DIV 3</div>
</div>
<button id="rotate">Rodar</button>

Note that the pertendido may not function in the IE8.

Good Luck.