0

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>   

1 Resposta 1

3

Boas Goncalo, abaixo deixo um exemplo de como atingir o resultado pertendido.

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 que o pertendido pode nao funcionar no IE8.

Boa Sorte.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .