Bom, tenho uma div que contem divs secundarias dentro dela, o que pretendo é fazer um efeito, que faça rotacionar as divs interiores, ou seja da direita para a esquerda, matendo a posição da div principal.
Ou seja pretendia mover as divs interiores ao clicar num button, da direita para a esquerda mas mantendo a posição da div principal.
Como poderei fazer isso?
<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>