CSS로 엘리먼트 회전시키기

CSS3에서 지원하는

transform 속성을 이용하면 각종 변환을 이용할 수 있다.

그 속성중에 rotate에 대해 알아보자.

transform의 경우 아직 표준화 심사중인 속성으로 벤더 프리픽스가 필요하다. 필자의 경우 크롬브라우저를

이용하고 있기 때문에 -webkit-을 붙여주었다. 

-webkit-transform:

rotateX(각도)  ->요소를 X축에 대하여 회전시킨다. 각도의 단위는 rad, deg

rotateY(각도)  ->요소를 Y축에 대하여 회전시킨다.

rotateZ(각도)  ->요소를 Z축에 대하여 회전시킨다.

rotate3d(a,b,c 각도) -> 요소를 방향벡터 (a,b,c)와 방향이 같은 직선을 축으로 회전시킨다.