0
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>