CSS와 Javascript로 Dom에서 node 위치 변경하기

Rotate!

위의 돌아가는 네게의 창은 div 네개로 만들어져있다. 

HTML은 아래같이 해놓았다. (더보기를 클릭)

<div id="div_container" style="width:42px; height:42px;">    
    <div class="r_div" style="width:20px; height:20px; background-color: orange;float: left;">

    </div>

    <div class="r_div" style="width:20px; height:20px; background-color: Chartreuse;float: left;">

    </div>

    <div class="r_div" style="width:20px; height:20px; background-color: yellow;float: left;">

    </div>

    <div class="r_div" style="width:20px; height:20px; background-color: Aqua;float: left;">

    </div>

</div>

Div 하나에 4개의 div를 넣고 각각에 색칠을 해놓은 것 뿐이다. 

그럼 저걸 돌아가게 만들어보쟈~!

<script type="text/javascript">
function rotate() {    
     var e = document.querySelector("#div_container");
     var cont = document.querySelectorAll(".r_div");
     e.appendChild(cont[2]);
     e.appendChild(cont[0]);
     e.appendChild(cont[3]);
     e.appendChild(cont[1]);
}

setInterval(rotate,1000);
</script><input type="button" onclick="rotate()"> Rotate! <br />

 위와 같이 rotate 함수를 만들어서 setInterval로 1초마다 호출해주면 div_container에서 class가 r_div인 div 네개를 꺼내서 돌아가는 것처럼 보이게 순서를 재배치 해준다. 브라우저가 div를 다시 그려주기 때문에 돈는 것 처럼 보인다.  
Rotate 버튼을 눌러도 돈다~~

구글 크롬의 개발자 도구 (F12를 누르면 나옴) 에서 살펴보면 1초마다 layout을 변경하고 paint를 다시 하는 것을 볼 수 있다. 한마디로 좋지 않음 ㅎ

 
node들의 style만 바꾸어주는 것으로 바꾼다면 성능이 더 좋을 것 같다. layout을 안바꿀테니말이다.
그냥 생각나서 장난으로 해봤다.