How to rotate a div?

Question

How to rotate a div?

Navigation

#1 by (3 votes)

0

Well, I have a div that contains secondary divs inside it, what I want is to make an effect, which rotates the inner divs, ie from right to left, killing the position of the main div.

In other words, I wanted to move the inner divs by clicking a button, from right to left but holding the position of the main div.

How can I do this?

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

javascript jquery css

asked by anonymous 30.01.2017 / 01:59

1 answer

Values of formulas do not match While loop - number counter minus 0

score 3 · Answer 1

Good Goncalo, here is an example of how to achieve the desired 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 search engine may not work in IE8 .

Good Luck